在Angular 9中,要手动设置响应式表单控件的错误状态而不改变整个表单的状态,可以使用markAsTouched()
方法。
以下是一个示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
username: ['', Validators.required]
});
}
onSubmit() {
if (this.myForm.invalid) {
// 手动设置表单控件的错误状态
this.myForm.controls.username.setErrors({ 'incorrect': true });
// 手动设置控件为已触摸状态
this.myForm.controls.username.markAsTouched();
} else {
// 表单验证通过,执行提交操作
}
}
}
在上述代码中,我们首先创建了一个包含一个用户名输入框的响应式表单控件。如果用户名输入框的值为空,我们将手动设置该控件的错误状态为{ 'incorrect': true }
,并将其标记为已触摸状态。这样,即使表单中的其他控件通过了验证,表单的状态仍会被标记为无效。
在模板中,我们使用*ngIf
指令来检查控件的touched
状态和错误状态,并显示错误消息。
注意:在实际应用中,可以根据具体需求自定义错误消息的样式和内容。