要从API获取错误并在Angular Material的mat-error中显示错误,您可以按照以下步骤操作:
mat-form-field
和mat-error
来显示表单控件和错误消息。例如:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myInput: ['', Validators.required]
});
}
getErrorMessage() {
if (this.myForm.get('myInput').hasError('required')) {
return 'This field is required';
}
}
}
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiService } from './api.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
errorMessage: string;
constructor(private formBuilder: FormBuilder, private apiService: ApiService) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myInput: ['', Validators.required]
});
}
getErrorMessage() {
if (this.myForm.get('myInput').hasError('required')) {
return 'This field is required';
}
return this.errorMessage;
}
onSubmit() {
if (this.myForm.valid) {
this.apiService.getData().subscribe(
(response) => {
// 处理成功响应
},
(error) => {
this.errorMessage = error.message;
}
);
}
}
}
在上述示例中,我们使用ApiService
来获取API数据。当表单提交时,我们订阅API响应并在错误回调中设置错误消息。然后,我们可以在getErrorMessage()
函数中返回这个错误消息,并在mat-error
中显示它。
请注意,您需要根据您自己的API和表单验证规则进行修改。