輸入即使在錯誤爲空時也是無效的

Question

我試圖創建自己的密碼確認驗證，並將錯誤放在$ error上。這是我的代碼：

HTML：

<input ng-model="user.password2" type="password" name="password2" required 
ng-keyup="confirmPassword(user.password, user.password2)"> 
<div ng-messages="register.password2.$error" ng-if="register.password2.$dirty"> 
    <div ng-message="required">Password is required</div> 
    <div ng-message="passwordsDontMatch">Passwords don't match</div> 
</div> 

JS：

$scope.confirmPassword = function (pass1, pass2) { 
     if (angular.isUndefined(pass1) || angular.isUndefined(pass2) || pass1.trim() != pass2.trim()) { 
      $scope.register.password2.$error["passwordsDontMatch"] = true; 
     } else { 
      delete $scope.register.password2.$error["passwordsDontMatch"]; 
     } 
     console.log($scope.register.password2.$error); 
    }; 

它看起來像它的工作。當密碼相同時，消息不會顯示，並且$ error對象是空的。但輸入仍然無效：（$scope.register.password2.$invalid == true）

你可以看到我在這個plunkr中所說的：http://plnkr.co/edit/ETuVqsdSaEBWARvlt4RR?p=preview 嘗試2個相同的密碼。該消息將消失，但是當你從輸入模糊時，它仍然是紅色的，因爲它在內部是非法的

Answer 1

這個問題可能來自於你沒有在與你的正則表達式模式相匹配的第一個字段中輸入密碼。因此第一個密碼是未定義的，因爲它不尊重ng模式驗證規則。

也就是說，你不應該直接修改$ error數組。相反，您應該使用$setValidity()來設置該字段的有效性。這不僅會設置並自動刪除錯誤，但也應對$無效/ $有效屬性，添加和刪除CSS類等

var valid = !((angular.isUndefined(pass1) || angular.isUndefined(pass2) || pass1.trim() != pass2.trim())); 
$scope.register.password2.$setValidity("passwordsDontMatch", valid); 

這裏有一個working example。但請記住首先輸入有效的密碼。

而不是用ng-keyup來實現這個檢查，你應該把它作爲一個指令，它會向表單輸入的驗證器添加一個驗證器。這將確保無論輸入第二個密碼的方式（即通過僅使用鼠標進行復制/粘貼，或僅通過以編程方式預填充窗體）進行檢查。