如何用AngularJS中的另一個輸入更改密碼驗證？

我有3個輸入這樣的：如何用AngularJS中的另一個輸入更改密碼驗證？

<div class="form-group"> 

     <label for="username">Username</label> 
     <input type="text" 
       ng-model="formModel.username" 
       class="form-control" 
       id="username" 
       name="username" 
       required> 

       <span class="help-block" 
         ng-show="myForm.username.$error.required && myForm.username.$dirty"> 
         Required 
       </span> 

    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" 
       class="form-control" 
       id="password" 
       name="password" 
       ng-model="formModel.password" 
       required 
       valid-my-password> 

     <span class="help-block" 
       ng-show="myForm.password.$error.required && myForm.password.$dirty"> 
       Required 
     </span> 
     <span class="help-block" 
      ng-show="!myForm.password.$error.required && 
      myForm.password.$error.sameAs && myForm.password.$dirty || myForm.username.$dirty"> 
      Username and password are similar 
     </span> 

    </div> 
    <div class="form-group"> 

     <label for="password_c">Approve password</label> 
     <input type="password" 
     class="form-control" 
     id="password_c" 
     name="password_c" 
     ng-model="formModel.password_c" 
     required 
     valid-password-c /> 

     <span class="help-block" 
     ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty"> 
      You need to approve the password 
     </span> 

     <span class="help-block" 
     ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
     myForm.password.$dirty"> 
     Passwords don't match 
     </span> 
    </div>

和驗證的偉大工程。但是： 1.如果密碼與用戶名相似，我嘗試更改用戶名，警報dosn't便宜。 2.如果密碼和確認密碼輸入已填寫且確認無誤，並且我試圖更改密碼，則不會顯示「密碼不匹配」警報。

jsFiddle

來源

2017-03-22 oded

，我發現我的答案的更新的鏈接。我添加另一個名爲「validMyUsername」的指令，我從用戶名輸入中調用他。在這個指令中，我更改了密碼驗證。以及用於驗證的密碼指令中的確認密碼。這樣的：

的用戶名輸入指令：

... 
directive('validMyUsername', function() { 

return { 
    require: 'ngModel', 
    link: function (scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function (viewValue, $scope) { 
      var sameAs = viewValue != scope.myForm.password.$viewValue 

      scope.myForm.password.$setValidity('sameAs',sameAs); 
      ctrl.$setValidity('sameAs',sameAs); 

      return viewValue; 
     }) 
    } 
}

密碼指令：

... 
directive('validMyPassword', function() { 

return { 
    require: 'ngModel', 
    link: function (scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function (viewValue, $scope) { 
       var sameAs = viewValue != scope.myForm.username.$viewValue 
       var noMatch = viewValue != scope.myForm.password_c.$viewValue 

      scope.myForm.password_c.$setValidity('noMatch',!noMatch); 
      ctrl.$setValidity('sameAs', sameAs) 

      return viewValue; 
     }) 
    } 
}

}）

以下是完整的例子：jsFiddle

來源

2017-03-23 06:51:04 oded

只是片段更改下面

<span class="help-block" ng-show="!myForm.password.$error.required && 
      myForm.password.$error.sameAs && myForm.password.$dirty && formModel.password==formModel.username"> 
      Username and password are similar 
     </span> 

<span class="help-block" ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && 
     myForm.password.$dirty && formModel.password_c!=formModel.password"> 
     Passwords don't match 
     </span>

你的錯誤校驗這裏是你的小提琴

http://jsfiddle.net/vz215k94/

來源

2017-03-22 14:18:26

錯誤仍apper，但仍然輸入無效，我已添加視圖查看屬性http://jsfiddle.net/odedtaizi/vz215k94/2/ – oded

什麼時候輸入變爲無效？ –

當他與用戶名相同時，或者當與確認輸入不匹配時。它需要在指令中進行更改。 – oded

如何用AngularJS中的另一個輸入更改密碼驗證？

回答

相關問題