AngularJs单选按钮脏验证不起作用

时间:2013-11-02 12:27:38

标签: javascript angularjs

我有两个字段,对于电子邮件,验证工作正常,但对于单选按钮没有显示错误..我没有得到这个,为什么会发生这种情况。我使用angular-1.0.8.min.js

 //js code 
    var app = angular.module("App", []);
    app.controller('signupController', ['$scope', function($scope) {
          $scope.selectedGender = '';
          $scope.gender = [{'name':'Male', 'id':1}, {'name':'Female', 'id':2}];

          $scope.submitted = true;
          $scope.signupForm = function() {
            if ($scope.signup_form.$valid) {
              // Submit as normal
            } else {
              $scope.signup_form.submitted = true;
            }
          }
        }]);
     //html code  
  <!DOCTYPE html>
    <html >
      <meta charset="utf-8">
    <meta content="width=device-width" name="viewport">
    <body ng-app="validationExampleApp">
    <div align="center" style="width: 500px; ">
    <form  ng-controller="signupController"  name="signup_form" novalidate ng-submit="signupForm()">
      <fieldset>
        <legend>Signup</legend>

        <div class="row">          
      <div class="large-12 columns">
        <label>Your email</label>
        <input type="email" 
          placeholder="Email" 
          name="email" 
          ng-model="signup.email" 
          ng-minlength=3 ng-maxlength=20 required />
        <div class="error" 
             ng-show="signup_form.email.$dirty && signup_form.email.$invalid && signup_form.submitted ">
          <small class="error" 
                 ng-show="signup_form.email.$error.required">
                 Your email is required.
          </small>

          <small class="error" 
                 ng-show="signup_form.email.$error.email">
                 That is not a valid email. Please input a valid email.
          </small>

        </div>
      </div>
    </div>
          <div ng-repeat="(key, val) in gender">
        <input type="radio" ng-model="signup.selectedGender" name="radiob" id="{{val.id}}" value="{{val.id}}"  ng-click  required /> {{val.name}}
      </div>
      <div class="error" 
             ng-show="signup_form.radiob.$dirty && signup_form.radiob.$invalid && signup_form.submitted ">
          <small class="error" ng-show="signup_form.radiob.$error.required">
                 Your email is required.
          </small>
        </div>
        <button type="submit" class="button radius">Submit</button>
      </fieldset>
    </form>
    </div>
    </body></html>

1 个答案:

答案 0 :(得分:2)

很难说清楚,因为提供的代码无效,但您可能会遇到角度js错误,它不会将单选按钮标记为有效,直到选中所有单选按钮为止。

请参阅此question

这在版本1.2.0-rc.3中已得到修复。我创建了一个Plunker演示here,其中包含一些代码更改,以模仿我认为您要尝试的内容。