如何将`form`作为无效返回？

Question

我正在比较password字段和＆＃39; repassword fields. when user wrongly types even in repassword fields i am throwing error. But the submit`按钮启用..

据我所知，我需要让表单成为$invalid如何做到这一点？而不是测试“去掉”中的变量＆＃39;在提交按钮？

＆＃13;

＆＃13;

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.myFormDetails = function ( userInfo ) {
    
    console.log( userInfo );
    
  }
  
});

＆＃13;

label{
  display:block;
  padding:1em;
}

span.error{
  display:block;
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MainCtrl">
    
    <form name="myForm" novalidate ng-submit="myFormDetails(userInfo)">
      
      <label for="password">
        Enter Password
        <input type="password" ng-pattern="/^[^\s]+$/" name="password" ng-model="userInfo.password" id="password" required>
        <span class="error"  
          ng-show="myForm.password.$dirty && !myForm.password.$valid">
            Please Provide Valid Password
          </span>
      </label>
      
      <label for="password">
        Re-Enter Password
        <input type="password" name="repassword" id="repassword" ng-model="userInfo.repassword" required>
        <span class="error" 
        ng-show="myForm.repassword.$dirty &&
          (userInfo.password != userInfo.repassword || myForm.repassword.$invalid)">
          Password not matching
      </span>
      </label>
      <label for="submit">
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
      </label>
    </form>
    
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

取消表单标记中的novalidate属性。

它指定在提交时不应验证表单数据（输入）。

＆＃13;

＆＃13;

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.myFormDetails = function ( userInfo ) {
    
    console.log( userInfo );
    
  }
  
});

＆＃13;

label{
  display:block;
  padding:1em;
}

span.error{
  display:block;
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MainCtrl">
    
    <form name="myForm" ng-submit="myFormDetails(userInfo)">
      
      <label for="password">
        Enter Password
        <input type="password" ng-pattern="/^[^\s]+$/" name="password" ng-model="userInfo.password" id="password" required>
        <span class="error"  
          ng-show="myForm.password.$dirty && !myForm.password.$valid">
            Please Provide Valid Password
          </span>
      </label>
      
      <label for="password">
        Re-Enter Password
        <input type="password" name="repassword" id="repassword" ng-model="userInfo.repassword" required>
        <span class="error" 
        ng-show="myForm.repassword.$dirty &&
          (userInfo.password != userInfo.repassword || myForm.repassword.$invalid)">
          Password not matching
      </span>
      </label>
      <label for="submit">
        <button type="submit" ng-disabled="userInfo.password != userInfo.repassword || myForm.$invalid">Submit</button>
      </label>
    </form>
    
  </div>

＆＃13;

＆＃13;

＆＃13;