[英]Show server side validation message in angularjs material md-input-container with ng-messages
I have a form with some inputs which are in md-input-container. 我有一些在md-input-container中的输入形式。 Each input have some validation message with ng-messages directive:
每个输入都有一些带有ng-messages指令的验证消息:
<form name="ctrl.myForm" layout="column" ng-submit="addUser(model)">
<input hide type="submit" />
<div layout="column" layout-padding>
<md-input-container>
<label translate>Username</label>
<input name="username" ng-model="model.username" type="text" required>
<div ng-messages="ctrl.myForm.username.$error">
<div ng-message="required" translate>This field is required.</div>
<div ng-message="unique" translate>Username is used before.</div>
</div>
</md-input-container>
<md-input-container>
<label translate>Email</label>
<input name="email" ng-model="model.email" required>
<div ng-messages="ctrl.myForm.email.$error">
<div ng-message="required" translate>This field is required.</div>
<div ng-message="email" translate>Email is not valid.</div>
</div>
</md-input-container>
</div>
<div layout="row">
<span flex></span>
<md-button
class="md-raised"
ng-click="cancel()">
<wb-icon>close</wb-icon>
<span translate>Cancel</span>
</md-button>
<md-button
class="md-raised"
ng-click="addUser(model)">
<wb-icon>done</wb-icon>
<span translate>Add</span>
</md-button>
</div>
</form>
In my controller, I have a function named addUser(model) which send given data to server and receives some validation codes. 在我的控制器中,我有一个名为addUser(model)的函数,该函数将给定数据发送到服务器并接收一些验证代码。 I set appropriate keys in $error objects but relative messages are not show.
我在$ error对象中设置了适当的键,但未显示相关消息。 I set keys as following if I get error from server:
如果从服务器收到错误,我将密钥设置如下:
function addUser(model){
$myService.newUser(model)//
.then(function(user) {
// user is created successfully.
}, function(error) {
ctrl.myForm.$invalid = true;
ctrl.myForm.username.$error['unique'] = true;
ctrl.myForm.email.$error['email'] = true;
});
}
I expect when I set keys as true related messages appear in the form but message are not shown. 我希望当我将键设置为true时,相关消息会显示在表单中,但消息不会显示。 In this time if I change value of a field related message of that field is shown!
此时,如果我更改与该字段相关的消息的值,则会显示该字段! I could not find problem.
我找不到问题。
Read here https://docs.angularjs.org/guide/forms
about $asyncValidators
, there are some examples also. 在这里阅读有关
$asyncValidators
https://docs.angularjs.org/guide/forms
,也有一些示例。 ( ctrl.$asyncValidators.username=...
etc.) (
ctrl.$asyncValidators.username=...
等)
In few words: 简而言之:
Angularjs built-in validation requires you to write and add validators. Angularjs内置验证要求您编写和添加验证器。 You should not control
$invalid, $error
fields manually (Thats why they have $ prefix). 您不应手动控制
$invalid, $error
字段(这就是为什么它们具有$前缀)的原因。 Angularjs material also follow this approach. Angularjs材料也遵循这种方法。
PS reason why lines like ctrl.myForm.$invalid = true;
PS为何类似
ctrl.myForm.$invalid = true;
wont work consistently is quite simple - angularjs next validation run will set it back to false 不会始终如一地工作非常简单-angularjs下一次验证运行会将其设置为false
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.