我目前使用这样的标记所有的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
更合适,以便延迟错误反馈,直到元素失去焦点(或表单已经提交)。