Tôi đang tìm kiếm một cách thanh lịch để hiển thị thông báo xác thực từ API phía máy chủ mà không phải tạo trình xác thực tùy chỉnh hoặc mã hóa cứng tất cả các thư có thể có trong giao diện người dùng.Thông báo xác thực phía máy chủ 2 (Beta)
Tôi cần thêm thông báo lỗi vào các trường cụ thể cũng như toàn bộ biểu mẫu.
này phải làm việc trong góc 2.0.0-beta.3
tôi trình bày cho bạn những displayErrors dứt khoát function (Xử lý máy chủ kiểm chứng thực phía sau JSONAPI Chuẩn):
Bạn sẽ cần Underscore.js
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(', ') });
});
}
Có hai loại vụ việc phê chuẩn server:
Đối với một, chỉ cần trích xuất các thông điệp từ payload phản ứng và đặt nó vào một tài sản của thành phần của bạn để hiển thị nó vào mẫu liên quan:
@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})`;
}
);
}
}
Tôi giả định rằng tải trọng đáp ứng cho lỗi là một JSON một và tương ứng như sau:
{
"code": 422,
"description": "Some description",
"reasonPhrase": "Unprocessable Entity"
}
Đối với một thứ hai, bạn có thể thiết lập nhận lỗi thông báo trong các điều khiển được liên kết với các đầu vào biểu mẫu, như được mô tả bên dưới:
@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 });
});
}
);
}
}
Tôi giả định tải trọng phản hồi lỗi là một JSON và tương ứng với các điều sau:
{
messages: [
{
"property": "name",
"message": "The value can't be empty"
]
}
Để biết thêm chi tiết bạn có thể có một cái nhìn tại dự án này:
Các liên kết dường như đã chết. – DDiVita
@DDiVita Tôi đã sửa các liên kết. – Ergwun