修改 ng-messages 指令以仅在字段为 $dirty 时显示

Question

我目前对所有 ng-messages 使用这样的标记

<div ng-messages="myForm.fieldName.$error && (myForm.firldName.$dirty || myForm.$submitted)">
    <div ng-message="required">This field is required</div>
    <div ng-message="minlength">Your field is too short</div>
</div>

虽然有点乱，但我想以某种方式覆盖或扩展 ng-messages，以便它自动检查字段是否脏或字段嵌套在其中的形式（通过走 DOM 也许吧？）是 $submitted.

我希望这是我站点中所有 ng-messages 的默认行为，并且无法预见在未使用输入和表单时我需要显示错误消息的情况尚未提交，所以我认为覆盖该行为是安全的，我只是不知道该怎么做。

我知道我可以完全替换 ng-messages 但是我必须重新创建该指令的所有默认行为，这些行为可能会在未来的 angular 版本中改变所以我宁愿只是扩展如果可能的话。我不知道 Angular 是否为此提供了任何挂钩（我隐约听说过装饰器方法？）或者是否制作一个同级指令，例如 "ng-custom-messages" 只是隐藏元素如果条件没遇到？

所以，我有几个想法，但我需要一点点提示来展示如何实现它们，如果有人觉得仁慈的话，只是一些框架代码？

Answer 1

不幸的是，对此的答案是编写一个新的表单指令，该指令在提交发生时自动将所有字段设置为脏。

这是一小段代码...

angular.forEach( formCtrl , function ( formElement , fieldName ) {

    if ( fieldName[0] === '$' ){
        return;
    } 

    formElement.$setDirty();

}, this);

formCtrl.$setDirty();
scope.$apply();

Answer 2

我建议在使用 ngMessages 的元素上使用 ngIf。请注意，ngMessages 接受 NgModelController（或 FormController）的 $error 属性。

<div ng-if="myForm.fieldName.$invalid && (myForm.fieldName.$dirty || myForm.$submitted)"
        ng-messages="myForm.fieldName.$error">
    <div ng-message="required">This field is required</div>
    <div ng-message="minlength">Your field is too short</div>
</div>

顺便说一句，您可能会发现使用 $touched 而不是 $dirty 更合适，以便将错误反馈推迟到元素 失去焦点 （或表格已提交）。

修改 ng-messages 指令以仅在字段为 $dirty 时显示

Modify ng-messages directive to only show when field is $dirty

javascript

angularjs

ng-messages