如何在AngularJS的輸入字段中捕獲模式錯誤？

Question

我建立了一個函數捕獲錯誤，但它僅適用於標准HTML5驗證，如果我使用ng-pattern則無法捕獲錯誤：(怎么做？可能類似於if(error.login$invalid) 。

模板：

<input type="text" name="login" class="form-input"
    ng-model="newUser.login"
    ng-pattern="loginPattern"
    required>
<div class="error"
    ng-show="registrationForm.login.$invalid && registrationForm.login.$dirty">
    {{getSigningError(registrationForm.login.$error)}}
</div>

控制器：

$scope.getSigningError = function(error){
    if(angular.isDefined(error)){
        if(error.required){
            return "Field shouln`t be empty"
        }
        if(error.email){
            return "Enter correct email"
        }
        if(error.login){
            return "Enter correct login"
        }
    }
}

Answer 1

您可以在以下條件下使用error.pattern ，例如以下代碼：

if(error.pattern){
    return "Enter the correct format"
}

或者，您可以使用以下方法從模板端進行處理：

<span ng-if="myForm.login.$error.pattern">Invalid Pattern</span>

觀察： ngPattern和其他驗證器一樣，將為模式驗證器ng-invalid-pattern添加ng-invalid和特定的類。 因此，如果您想為此類錯誤應用特定的樣式，則可以使用此類。

.ng-invalid-pattern  {
    color: yellow;
}

參考文獻

形式

Answer 2

如果沒有傳遞錯誤，則可以像控制器一樣進行檢查：

if ($scope.formName.ControlName.$error.pattern) {}

通過模式驗證時， $scope.formName.ControlName.$error.pattern將是未定義的，否則將有效。