使用 Angular 验证单选按钮选择

Question

我被要求在网页上显示 Yes/No 单选按钮。在初始状态下，这些选项均未被选中。需要进行验证以确保用户选择其中之一。我能够使用浏览器自己的表单验证来做到这一点，就像这样：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>
  <script src="angular.min.js"></script>  
</head>
<body ng-app="radioExample">
   <script>
   angular.module('radioExample', [])
     .controller('ExampleController', ['$scope', function($scope) {      
       $scope.submitForm = function() {
         alert('valid');
   }       
 }]);
 </script>
 <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate>
   <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/>
   <input name="question" type="radio" ng-model="question" value="no">No<br/>
   <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre>
   <div ng-messages="myForm.question.$error" role="alert">
       <div ng-message="required">You did not enter a field</div>
   </div>
   <button type="submit">Submit</button>
</form>
</body>
</html>

我希望能够利用 Angular 在 ng-message 中显示验证消息，但我正在努力使其工作：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>  
  <script src="angular.min.js"></script>  
</head>
<body ng-app="radioExample">
   <script>
   angular.module('radioExample', [])
     .controller('ExampleController', ['$scope', function($scope) {       
       $scope.submitForm = function() {
         alert('valid');
       }       
     }]);
 </script>
 <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate>
   <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/>
   <input name="question" type="radio" ng-model="question" value="no">No<br/>
   <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre>
   <div ng-messages="myForm.question.$error" role="alert">
       <div ng-message="required">You did not enter a field</div>
   </div>
   <button type="submit">Submit</button>
  </form>
</body>
</html>

我做错了什么？

Answer 1

我认为 "required" 对无线电输入无效。所以这里并没有真正指定 browser/Angular 行为。所以问题是，表格是有效的。这是一个包含您所问内容的代码片段，但它不是很清楚和直接。

angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {       
  $scope.submitForm = function() {
    alert('valid');
  }       
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="radioExample">
 <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate>
   <input name="question" type="radio" ng-model="question" value="yes">Yes<br/>
   <input name="question" type="radio" ng-model="question" value="no">No<br/>
   <div ng-if="question!='yes'" role="alert">
       <div>You did not enter a field</div>
   </div>
   <button type="submit">Submit</button>
  </form>
</div>

Answer 2

尝试：

HTML:

<form ng-app="radioExample"  ng-controller="ExampleController" name="myForm"  novalidate ng-submit="submitForm()">
    <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/>
    <input name="question" type="radio" ng-model="question" value="no">No<br/>
    <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre>
    <div ng-messages="myForm.question.$error" role="alert">
        <div ng-message="required">You did not enter a field</div>
    </div>

    <input class="btn" type="submit" value="Submit">
</form>

JS:

 angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
        $scope.submitForm = function() {
            alert('valid');
            return false;
        }
    }]);

使用 Angular 验证单选按钮选择

Using Angular to validate radio button choice

radio-button

angularjs