在这种小问题中,目标是根据控制器中的验证(而不是内置required
或min-length
)显示错误消息。设置ng-message-exp时,不显示消息错误。关于如何使这项工作更好或如何ng-message
实际工作的任何想法都与错误或模型相关联?
的HTML
<body ng-app="ngMessagesExample" ng-controller="ctl">
<form name="myForm" novalidate ng-submit="submitForm(myForm)">
<label>
This field is only valid when 'aaa' is entered
<input type="text"
ng-model="data.field1"
name="field1" />
</label>
<div ng-messages="myForm.field1.$error" style="color:red">
<div ng-message-exp="validationError">this is the error</div>
</div>
<br/><br/>
<button style="float:left" type="submit">Submit</button>
</form>
Java脚本
var app = angular.module('ngMessagesExample', ['ngMessages']);
app.controller('ctl', function ($scope) {
$scope.submitForm = function(form) {
if (form.field1.$modelValue != 'aaa') {
$scope.validationError = true;
console.log('show error');
}
else {
$scope.validationError = false;
console.log('don\'t show error');
}
};
});
您的主要ng-messages
论点是束缚的myForm.field1.$error
,但是您从未真正在变量上添加错误form.field1.$error
。因此,在您的控制器中,只需$error
通过$setValidity(field, isValid)
以下命令手动向对象添加错误:
if ($scope.data.field1 != 'aaa') {
form.field1.$setValidity('validationError', false);
// Angular will make form.field1.$error.validationError = true;
}
else {
form.field1.$setValidity('validationError', true);
// Angular will make form.field1.$error.validationError = false;
}
然后,您可以让ng-message
指令执行其工作。提供的子元素已经ng-message
被评估为其父级的属性ng-messages
(请注意额外的s
)。因此,通常将其与父元素一起用作form元素的$error
对象,而将内部子元素用作$error.required
或的属性$error.validationError
。不需要ng-message-exp
这里:
<div ng-messages="myForm.field1.$error" style="color:red">
<div ng-message="validationError">this is the error</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句