Validation Angular 2(测试版)服务器端验证消息
我正在寻找一种优雅的方式来显示来自服务器端API的验证消息,而无需在UI中创建自定义验证器或硬编码所有可能的消息 我需要向特定字段以及整个表单添加错误消息Validation Angular 2(测试版)服务器端验证消息,validation,angular,Validation,Angular,我正在寻找一种优雅的方式来显示来自服务器端API的验证消息,而无需在UI中创建自定义验证器或硬编码所有可能的消息 我需要向特定字段以及整个表单添加错误消息 这必须适用于Angular 2.0.0-beta.3。有两种服务器验证: 全局值(针对整个表单或表单提交过程中的错误) 与字段相关的字段 首先,只需从响应负载中提取消息,并将其放入组件的属性中,以将其显示在关联的模板中: @Component({ (...) template: ` <form (submit)="o
这必须适用于Angular 2.0.0-beta.3。有两种服务器验证:
- 全局值(针对整个表单或表单提交过程中的错误)
- 与字段相关的字段
@Component({
(...)
template: `
<form (submit)="onSubmit()">
(...)
<div *ngIf="errorMessage">{{errorMessage}}</div>
<button type="submit">Submit</button>
</form>
`
})
export class MyComponent {
(...)
onSubmit() {
this.http.post('http://...', data)
.map(res => res.json())
.subscribe(
(data) => {
// Success callback
},
(errorData) => {
// Error callback
var error = errorData.json();
this.error = `${error.reasonPhrase} (${error.code})`;
}
);
}
}
对于第二个,您可以在与表单输入关联的控件内设置接收到的错误消息,如下所述:
@Component({
(...)
template: `
<form [ngFormModel]="myForm" (submit)="onSubmit()">
(...)
Name: <input [ngFormControl]="myForm.controls.name"/>
<span *ngIf="myForm.controls.name.errors?.remote"></span>
(...)
<button type="submit">Submit</button>
</form>
`
})
export class MyComponent {
(...)
constructor(builder:FormBuilder) {
this.myForm = this.companyForm = builder.group({
name: ['', Validators.required ]
});
}
onSubmit() {
this.http.post('http://...', data)
.map(res => res.json())
.subscribe(
(data) => {
// Success callback
},
(errorData) => {
// Error callback
var error = errorData.json();
var messages = error.messages;
messages.forEach((message) => {
this.companyForm.controls[message.property].setErrors({
remote: message.message });
});
}
);
}
}
有关更多详细信息,您可以查看此项目:
displayErrors(error: ErrorResponse) {
let controls = this.supportRequestForm.controls;
let grouped = _.groupBy(error['errors'], function(e) {
return e['source']['pointer'];
});
_.each(grouped, function(value, key, object) {
let attribute = key.split('/').pop();
let details = _.map(value, function(item) { return item['detail']; });
controls[attribute].setErrors({ remote: details.join(', ') });
});
}
链接好像死了。@DDiVita我已经修复了链接。
{
messages: [
{
"property": "name",
"message": "The value can't be empty"
]
}
displayErrors(error: ErrorResponse) {
let controls = this.supportRequestForm.controls;
let grouped = _.groupBy(error['errors'], function(e) {
return e['source']['pointer'];
});
_.each(grouped, function(value, key, object) {
let attribute = key.split('/').pop();
let details = _.map(value, function(item) { return item['detail']; });
controls[attribute].setErrors({ remote: details.join(', ') });
});
}