Question

我构建了一个函数catch错误，但它仅适用于标准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添加ng-invalid-pattern和特定类。因此，如果您想为这类错误应用特定样式，可以使用此类。

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

参考文献

Forms

Answer 2

如果您没有传递错误，可以像控制器一样检查：

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

传递模式验证时，

$scope.formName.ControlName.$error.pattern将被定义，否则将无效。

如何在AngularJS的输入字段中捕获模式错误？

2 个答案:

参考文献