角度表单验证答案

【问题标题】：Angular Form Validation角度表单验证
【发布时间】：2014-01-31 09:08:31
【问题描述】：

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

如果字段脏了，则根据正则表达式进行验证

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

如果该字段被标记为必需（当前保持所需字段完全取决于业务，因此我正在从 JSON 读取真/假值）然后用户可以尝试按原样提交表单

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

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

现在第三种情况是我没有得到的逻辑，如果用户点击名字文本框然后没有弄脏它，只是模糊了，那么如果 ng-required 设置为 true，则应该显示验证消息。如果我只是放置ng-show="aspnetForm.FirstName.$error.required"，然后在页面加载本身上显示错误消息，这是我不想要的，因为它给用户带来了糟糕的用户体验。

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

【问题讨论】：

标签： javascript angularjs validation

【解决方案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)'

【讨论】：

我实际上是 Angular 的新手。因此，如果这是最佳实践，我会采取这种做法，但除了创建指令之外别无他法
我不知道。您有一个包含无效字段的表单，并且只想在访问该字段后显示错误消息。我不相信 Angular 提供了一种机制来处理这种情况（如果有的话那就太好了！）。

【解决方案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}}/>。这应该可以工作，只有在为它设置了正确的值时才应该验证必填字段。

【讨论】：