Question

我真的很感谢你的帮助。我使用AngularJS以下面的方式在测验中呈现问题：

<form name="form1" ng-controller="quizController" ng-submit="submit()">
    <div class="form-group">
        <span class="col-xs-3">What is your favorite color?</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
        <span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

ng-required强制要求必须选择其中一个选项。如果未选择任何选项且用户单击提交按钮，则所有选项都以红色突出显示，并且第一个选项旁边会显示文本You must choose an option。我想调整这种行为，这样当没有选择任何选项时，它是以红色显示的问题文本。感谢您的协助

Answer 1

以下示例说明如何执行此操作。基本上你需要使用AngularJS的FormController的$ submitted和$ invalid属性。在这里看看它们：https://docs.angularjs.org/api/ng/type/form.FormController

我使用bootstrap的has-error类来突出显示问题，如果未选择颜色并且提交了表单，则问题将以红色突出显示。我添加了novalidate属性来禁用html5验证并仅使用了角度验证。

＆＃13;

angular.module("myApp", []).controller("quizController", function($scope) {
  $scope.submit = function() {
    console.log("oley");
  }
})

＆＃13;

.has-error {color: red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp">
  <form name="form1" ng-controller="quizController" ng-submit="submit()" novalidate>
    <div class="form-group">
      <span class="col-xs-3" ng-class="{'has-error' : form1.color.$invalid && form1.$submitted}">What is your favorite color?</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
      <span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </form>
</div>

＆＃13;

Answer 2

这是一个基于CSS的解决方案。

您可以将所有无线电文本包装到自己的范围内：

<span>
   <input type="radio" name="color" ng-model="color" ng-required="true"  value="Red" />
   <span>Red<span>
</span>
....

然后使用以下选择器将这些跨度的文本颜色设置为红色，如果单选按钮无效（因为它的值丢失）：

input[type=radio]:invalid + span { color: red; }

此外，我认为您只需将ng-required属性放在一个单选按钮上（如果它是常量，您可以用简单的required替换它。）

使用AngularJS进行验证

2 个答案: