使用 Angular 验证单选按钮的选择 [英] Using Angular to validate radio button choice

查看：53
本文介绍了使用 Angular 验证单选按钮的选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<html lang="zh-cn"><头><meta charset="UTF-8"><title>示例 - example-radio-input-directive-production</title><script src="angular.min.js"></script><body ng-app="radioExample"><脚本>angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {$scope.submitForm = function() {警报('有效')；}}]);<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate><input name="question" type="radio" ng-model="question" value="yes" required>是<br/><input name="question" type="radio" ng-model="question" value="no">否<br/><pre>myForm.question.$error = {{ myForm.question.$error |json }}</pre><div ng-messages="myForm.question.$error" role="alert"><div ng-message="required">您没有输入字段</div>

<button type="submit">提交</button></表单></html>

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

<html lang="zh-cn"><头><meta charset="UTF-8"><title>示例 - example-radio-input-directive-production</title><script src="angular.min.js"></script><body ng-app="radioExample"><脚本>angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {$scope.submitForm = function() {警报('有效')；}}]);<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate><input name="question" type="radio" ng-model="question" value="yes" required>是<br/><input name="question" type="radio" ng-model="question" value="no">否<br/><pre>myForm.question.$error = {{ myForm.question.$error |json }}</pre><div ng-messages="myForm.question.$error" role="alert"><div ng-message="required">您没有输入字段</div>

<button type="submit">提交</button></表单></html>

我做错了什么?

解决方案

我认为必需"对于无线电输入无效.因此，此处并未真正指定浏览器/Angular 行为.所以问题是，表格是有效的.这是您所要求的代码片段，但并不是很清楚和直接.

angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {$scope.submitForm = function() {警报('有效')；}}]);

<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">是<br/><input name="question" type="radio" ng-model="question" value="no">否<br/><div ng-if="question!='yes'" role="alert"><div>您没有输入字段</div>

<button type="submit">提交</button></表单>

I have been given a requirement to display Yes/No radio buttons on a webpage. In the initial state neither of these options are selected. There needs to be validation to ensure that the user picks one of these. I was able to do this using the browsers own form validation, like so:

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

I would like to be able to make use of Angular to display the validation messages in a ng-message but am struggling to make it work:

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

What am I doing wrong?

解决方案

I don't think "required" is valid for a radio input. So the browser/Angular behavior is not really specified here. So the problem is, the form is valid. Here a code snippet with what you ask, but it's not really clear and straightful.

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>

这篇关于使用 Angular 验证单选按钮的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆