使用Angular验证单选按钮的选择

我被要求在网页上显示是/否单选按钮。在初始状态下，这些选项都未被选中。需要验证以确保用户选择其中的一个。我能做到这一点使用的浏览器自身的表单验证，就像这样：使用Angular验证单选按钮的选择

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

我希望能够利用的角度，以显示在NG-消息的验证消息，但我在努力使它工作：

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

我做错了什么？

来源

2015-10-06 isxpjm

我不认为“必需”对无线电输入有效。所以浏览器/ 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>

来源

2015-10-06 12:12:20 Magus

尝试：

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; 
     } 
    }]);

来源

2015-10-06 12:55:14

使用Angular验证单选按钮的选择

回答

相关问题