在带有ng消息的angularjs material md输入容器中显示服务器端验证消息
我有一个带有一些输入的表单,它们位于md输入容器中。每个输入都有一些带有ng messages指令的验证消息:在带有ng消息的angularjs material md输入容器中显示服务器端验证消息,angularjs,forms,angularjs-material,ng-messages,Angularjs,Forms,Angularjs Material,Ng Messages,我有一个带有一些输入的表单,它们位于md输入容器中。每个输入都有一些带有ng messages指令的验证消息: <form name="ctrl.myForm" layout="column" ng-submit="addUser(model)"> <input hide type="submit" /> <div layout="column" layout-padding> <md-input-container&
<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>
我希望当我将键设置为true时,相关消息会显示在表单中,但消息不会显示。在这段时间内,如果我更改了某个字段的值,则会显示该字段的相关消息!我找不到问题。请阅读此处
https://docs.angularjs.org/guide/forms
关于$asyncValidators
,还有一些示例。(ctrl.$asyncValidators.username=…
等)
简言之:
Angularjs内置验证要求您编写和添加验证程序。您不应该手动控制$invalid,$error
字段(这就是为什么它们有$prefix)。
Angularjs材质也遵循此方法
p.S.ctrl.myForm.$invalid=true等行的原因代码>不会持续工作非常简单-angularjs下一次验证运行会将其设置回false
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;
});
}