javascript - 使用 AngularJS 进行验证

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 强制要求必须选择其中一个选项。当未选择任何选项并且用户单击提交按钮时，所有选项都会以红色突出显示，并且文本 您必须选择一个选项 出现在第一个选项旁边。我想调整此行为，以便在未选择任何选项时，问题文本显示为红色。感谢您的帮助

Answer 1

这里有一个示例来展示如何做到这一点。基本上你需要使用 AngularJS 的 FormController 的 $subscribed 和 $invalid 属性。在这里看看它们:https://docs.angularjs.org/api/ng/type/form.FormController

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

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

.has-error {color: red}

<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>