ng-message如何与模型连接，如何使用ng-message显示消息? [英] How ng-message is connected to model, and how can I show the message using ng-message?
问题描述
在此问题中的目的是显示基于验证的错误消息控制器(而不是内置的 required 或 min-length ).设置ng-message-exp时，不会显示消息错误.
In this plunk the objective is to show an error message based on validation in the controller (instead of the built-ins required or min-length). The message error does not display when the ng-message-exp is set.
关于错误或模型的任何想法，或者如何更好地发挥 ng-message 的实际作用?
Any idea on how to make this work or better how ng-message actually works which is tied to the error or model?
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>
JavaScript
Javascript
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 中添加了一个错误.因此，在您的控制器中，只需通过 $ setValidity(field，isValid)手动将错误添加到 $ error 对象:
Your main ng-messages argument is tied to myForm.field1.$error, but you never actually add an error to the form.field1.$error. So in your controller, just manually add an error to the $error object via $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 ).因此，通常将其与父元素一起用作表单元素的 $ error 对象，而内部子元素则与 $ error.required 等属性(在您的情况下为 $error.validationError .此处无需 ng-message-exp :
Then, you can just have the ng-message directive do its work. The child elements that provide ng-message are evaluated as properties of their parent ng-messages already (note the extra s). So typically, this is used with the parent being the form element's $error object and the inner children are the properties like $error.required or in your case $error.validationError. No need for ng-message-exp here:
<div ng-messages="myForm.field1.$error" style="color:red">
<div ng-message="validationError">this is the error</div>
</div>
这篇关于ng-message如何与模型连接，如何使用ng-message显示消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
