问题背景:
在Angular中,当我们使用响应式表单时,我们可以通过setErrors
方法来设置表单或表单控件的错误信息。但是,我们在设置子控件的错误信息后,可能会发现表单验证未触发。
解决步骤:
在父组件中,我们需要调用updateValueAndValidity()
方法来通知表单进行重新验证。该方法会遍历表单的所有控件并更新其状态,然后再次验证表单的有效性。
以下是一个示例,当我们从服务端异步获取错误信息后,我们会对表单控件进行setErrors
设置,然后在父组件中调用updateValueAndValidity()
方法来重新触发表单验证:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from './user.service';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
})
export class UserProfileComponent implements OnInit {
userForm: FormGroup;
constructor(
private fb: FormBuilder,
private userService: UserService,
) {}
ngOnInit() {
this.userForm = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
confirmPassword: ['', Validators.required],
});
}
onSubmit() {
this.userService.updateProfile(this.userForm.value).subscribe(
() => {
// update profile success
},
err => {
if (err.status === 400) {
const errors = err.error.errors;
for (const key in errors) {
if (this.userForm.get(key)) {
this.userForm.get(key).setErrors({ serverError: errors[key] });
}
}
this.userForm.updateValueAndValidity();
}
},
);
}
}
在上述示例中,当服务端返回错误信息时,我们会将错误信息设置为serverError
,然后通过setErrors