单选按钮验证angularjs

时间:2014-07-23 09:39:51

标签: angularjs

如果未选择单选按钮,如何禁用提交按钮。提供单选按钮使用angularjs中的ng-repeat从控制器生成动态数据

3 个答案:

答案 0 :(得分:1)

我在输入上使用了ng-required="true"。它奏效了。 看看这个plunker:http://plnkr.co/edit/NF5j2VC6prUCjRIk5bLW?p=preview

答案 1 :(得分:0)

您可以在单选按钮和提交按钮ng-disabled

中使用ng-required

http://plnkr.co/edit/h7FJljOXSaEjkKZ9L3S9?p=preview

在此代码中查看ng-required和ng-disabled指令:

<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
   <input type="radio" ng-model="color" value="red" ng-required="!color">  Red <br/>
   <input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/>
   <input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>
   <tt>color = {{color | json}}</tt><br/>
   <button 
   data-ng-disabled="myForm.$invalid"
   type="submit">Submit</button>
  </form>

答案 2 :(得分:0)

http://plnkr.co/edit/lPOAaddGNBBOd8c9sWj2?p=preview

<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
       <input type="radio" ng-model="color" value="red" >  Red <br/>
       <input type="radio" ng-model="color" value="green" > Green <br/>
       <input type="radio" ng-model="color" value="blue" > Blue <br/>
       <tt>color = {{color | json}}</tt><br/>
       <button 
       data-ng-disabled="!color"
       type="submit">Submit</button>
      </form>

JS:

 angular.module('radioExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.color = '';
       $scope.specialValue = {
         "id": "12345",
         "value": "green"
       };

       $scope.submitForm = function() {
         alert('valid');
       }

     }]);