如何以编程方式验证反应式表单控件?

Question

我有一个响应式形式的FormGroup对象。现在我想以编程方式触发表单验证。

我已经使用此代码检查了窗体，但是我的控件 css 状态类未设置，就像单击控件并在控件外部单击时所做的那样。

if (!this.formGroup.valid) {
// TODO: Fix that invalid controls don't get highlighted
return;
}

Answer 1

您可以使用以下命令以编程方式触发验证程序。

this.formGroup.controls['controlNameHere'].markAsTouched();

Answer 2

当你创建一个反应式表单时，你隐含地说，该表单应该在特定策略上更新其值和有效性。

有 3 种策略：

• 模糊时
• 关于变化
• 提交时

您可以在创建表单控件或表单组时更改更新策略。在您的情况下，更改策略应该有效。

这是一个包含两种策略的堆栈闪电战，看看什么最适合您。

first = new FormControl('', {
validators: [Validators.minLength(3)],
updateOn: 'blur'
})
second = new FormControl('', {
validators: [Validators.minLength(3)],
updateOn: 'change'
})

Answer 3

验证所有表单域

validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} 
else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
}