修改ng-messages指令，使其只在字段为$dirty时显示

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

本文关键字：字段 dirty 显示 指令 ng-messages 修改      更新时间：2023-09-26

我目前使用这样的标记所有的ng消息

<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可能?)$提交。

我希望这是在我的网站上的所有ng消息的默认行为，不能预见的情况下，当我需要显示错误信息时，输入没有被使用，表单还没有提交，所以我认为这是安全的覆盖该行为，我只是不知道如何做到这一点。

我知道我可以完全替换ng-messages，但这样我就必须重新创建该指令的所有默认行为，这些行为可能会在未来的angular版本中发生变化，所以如果可能的话，我宁愿扩展它。我不知道Angular是否为此提供了任何钩子(我隐约听说过装饰器方法?)，或者是否创建一个兄弟指令，比如"ng-custom-messages"，它只在不满足条件时隐藏元素。

所以，我有一些想法，但我需要一点提示来展示如何实现它们，只是一点框架代码，如果有人觉得慈善吗?

不幸的是，这个问题的答案是编写一个新的表单指令，在提交时自动将所有字段设置为dirty

下面是一小段代码…

angular.forEach( formCtrl , function ( formElement , fieldName ) {
    if ( fieldName[0] === '$' ){
        return;
    } 
    formElement.$setDirty();
}, this);
formCtrl.$setDirty();
scope.$apply();

我建议在使用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更合适，以便延迟错误反馈，直到元素失去焦点(或表单已经提交)。
相关文章：