In this plunk的目标是根据控制器中的验证显示错误消息(而不是所需的内置函数或最小长度).设置ng-message-exp时,不显示消息错误.任何想法如何使这项工作？
HTML
@H_301_3@<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
@H_301_3@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对象添加错误：
@H_301_3@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消息的属性(请注意额外的s).通常,这与父元素是表单元素的$error对象一起使用,内部子元素是$error.required或者你的情况$error.validationError.这里不需要ng-message-exp：
@H_301_3@<div ng-messages="myForm.field1.$error" style="color:red"> <div ng-message="validationError">this is the error</div> </div>