Question

我在验证中遇到某些情况。我需要对一个字段进行验证 - “名字”。我一直在使用的验证逻辑是 -

如果该字段为脏，则针对正则表达式进行验证

ng-show="aspnetForm.FirstName.$dirty && aspnetForm.FirstName.$error.nameValidate"

如果字段被标记为必需（当前保持所需字段完全取决于业务，因此我从JSON读取真/假值），那么用户可以尝试提交表单，因为它是

ng-show="blankSubmit && aspnetForm.FirstName.$error.required"

其中blankSubmit只是一个范围变量我在提交按钮单击时设置为true。

现在第3个场景是我没有得到的逻辑，如果用户点击firstname文本框然后没有弄脏它，只是模糊，然后如果设置ng-required则应显示验证消息true。如果我只是放置ng-show="aspnetForm.FirstName.$error.required"然后在页面加载自身，将显示错误消息，我不想要它，因为它给用户一个糟糕的用户体验。

我只想在属性ng-required设置为true且用户模糊文本框时显示错误消息。

Answer 1

一种可能的解决方案是创建一个指令，将某个字段标记为已访问，然后您可以在ng-show中进行检查：

.directive('visited', function() {
    return{
        restrict: 'A',
        require: 'ngModel',
            link: function(scope, element, attrs, ngModel){
                element.bind('blur', function(){
                    scope.$apply(function() {
                        ngModel.visited = true;
                    });
            });
        }
    };
});

查看：

ng-show='form.field.$error.required && (form.field.$dirty || form.field.visited)'

Answer 2

我建议您使用ng-messages。你的HTML看起来像这样：

<div ng-messages="aspnetForm.FirstName.$error" role="alert">
    <div ng-message="required">Please enter a value for this field.</div>
    <div ng-message="nameValidate">This field must be a valid.</div>
    ...
</div>

如果您想根据某些变量使用required，我建议您使用此<input ... required={{shouldBeRequired}}/>。这应该工作，只有在设置了适当的值时才需要验证必填字段。

角度形式验证

2 个答案: