AngularJS中的ng-show和ng-disabled出现问题

Question

我在客户端表单验证中有一个简单的演示HTML页面。尽管我是AngularJS的新手，但我想集成Bootstrap + AngularJS + Jquery。

我不知道为什么ng-show和ng-disabled不能按预期方式工作。当任何输入控件无效时，应该禁用Submit按钮。当相应的输入控件中的任何一个无效时，应显示错误消息。这是我的代码段。

            $(document).ready(function(){
                $("#date").datePicker();
            });
          
          var myApp = angular.module("myApp",[]);
            myApp.controller('myController', function($scope){
                $scope.submitForm = function() {

                // check to make sure the form is completely valid
                if ($scope.myForm.$valid) {
                    alert('our form is amazing');
                }

            }
            });

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

            <div ng-app="myApp" ng-controller="myController">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <form novalidate name="myForm" ng-submit="submitForm()" >
                                <div class="form-group">
                                <label>Username</label>
                                <input type="text" name="username" ng-minLength="3" ng-maxLength="10" placeholder="type your username" class="form-control" required></input>
                                <p ng-show="myForm.username.$error.$pristine" class="help-block">Username is required.</p>
                                <p ng-show="myForm.username.$error.minlength" class="help-block">Username is too short.</p>
                                <p ng-show="myForm.username.$error.maxlength" class="help-block">Username is too long.</p>
                                </div>
                                <div class="form-group">
                                <label>Email</label>
                                <input type="email" name="email" placeholder="type your valid email" ng-pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" class="form-control" required></input>
                                <p ng-show="myForm.email.$error.$pristine" class="help-block">email is required.</p>
                                <p ng-show="myForm.email.$error.$pattern" class="help-block">Please enter valid email</p>
                                </div>
                                <div class="form-group">
                                <label>Password</label>
                                <input type="password" name="password" placeholder="type your password"  class="form-control" required></input>
                                <p ng-show="myForm.password.$error.$pristine" class="help-block">password is required.</p>
                                </div>
                                <div class="form-group">
                                <label>Date of Birth</label>
                                <input type="dob" name="dob" placeholder="type your valid Date of Birth" ng-pattern="^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$" class="form-control" required></input>
                                <p ng-show="myForm.dob.$error.$pristine" class="help-block">Date of Birth is required.</p>
                                <p ng-show="myForm.dob.$error.$pattern" class="help-block">Please enter valid Date of Birth</p>
                                </div>
                                <button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </body>
    </html>

Answer 1

要进行角度验证，您必须在输入类型上需要ng-model，请在此处plunker更新

<html>

<head>
  <title>Form Validation Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>

<body>
  <script>
    $(document).ready(function() {
      $("#date").datePicker();
    });
  </script>
  <div ng-app="myApp" ng-controller="myController">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <form novalidate name="myForm" ng-submit="submitForm()">
            <div class="form-group">
              <label>Username</label>
              <input type="text" name="username" ng-model="username" minLength="3" maxLength="10" placeholder="type your username" class="form-control" required />
              <span ng-show="myForm.username.$error.required" class="help-block">Username is required.</span>
              <p ng-show="myForm.username.$error.minlength" class="help-block">Username is too short.</p>
              <p ng-show="myForm.username.$error.maxlength" class="help-block">Username is too long.</p>
            </div>
            <div class="form-group">
              <label>Email</label>
              <input type="email" name="email" ng-model="email" placeholder="type your valid email" ng-pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" class="form-control" required />
              <p ng-show="myForm.email.$error.required" class="help-block">email is required.</p>
              <p ng-show="myForm.email.$error.$pattern" class="help-block">Please enter valid email</p>
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="password" name="password" ng-model="password" placeholder="type your password" class="form-control" required />
              <p ng-show="myForm.password.$error.required" class="help-block">password is required.</p>
            </div>
            <div class="form-group">
              <label>Date of Birth</label>
              <input type="dob" name="dob" ng-model="dob" placeholder="type your valid Date of Birth" ng-pattern="^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$" class="form-control" required />
              <p ng-show="myForm.dob.$error.required" class="help-block">Date of Birth is required.</p>
              <p ng-show="myForm.dob.$error.$pattern" class="help-block">Please enter valid Date of Birth</p>
            </div>
            <button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script>
    var myApp = angular.module("myApp", []);
    myApp.controller('myController', function($scope) {
      $scope.submitForm = function() {

        // check to make sure the form is completely valid
        if ($scope.myForm.$valid) {
          alert('our form is amazing');
        }

      }
    });
  </script>
</body>

</html>

这可能对您有帮助。 谢谢