angularjs - 使用 ng-messages 在 angularjs 材料 md-input-container 中显示服务器端验证消息
问题描述
我有一个包含一些输入的表单,这些输入位于 md-input-container 中。每个输入都有一些带有 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>
在我的控制器中,我有一个名为 addUser(model) 的函数,它将给定的数据发送到服务器并接收一些验证码。我在 $error 对象中设置了适当的键,但未显示相关消息。如果我从服务器收到错误,我将密钥设置如下:
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;
});
}
我希望当我将键设置为真正的相关消息时会出现在表单中,但不会显示消息。在这个时候,如果我改变一个字段的值,该字段的相关消息就会显示出来!我找不到问题。
解决方案
阅读here https://docs.angularjs.org/guide/forms
about $asyncValidators
,也有一些例子。(ctrl.$asyncValidators.username=...
等)
简而言之:
Angularjs 内置验证要求您编写和添加验证器。您不应该$invalid, $error
手动控制字段(这就是它们具有 $ 前缀的原因)。Angularjs 材料也遵循这种方法。
PS为什么行ctrl.myForm.$invalid = true;
不能始终如一地工作的原因很简单 - angularjs下一次验证运行会将其设置回false
推荐阅读
- java - 如何从核心转储文件中提取 JVM 堆转储?
- reactjs - 如何通过可访问性 API 为 React 中的自定义控件公开焦点状态?HTMLElement.focus() 就足够了吗?
- c# - LINQ 除了不检索重复项
- javascript - 复选框和本地存储
- linux - bash中的静默while循环
- node.js - 在 TypeORM 中设置生成列的基值/起始值
- oracle - SQL Oracle 中的通配符
- google-analytics - 自定义指标数据未显示在 Google Analytics(分析)中
- typescript - IntelliJ Idea + AEM 插件 + TypeScript 编译器问题
- python - Django 生产错误:/admin/posts/post/add/ 处的 ProgrammingError