要将验证器设置为整个 FormGroup,可以在创建 FormGroup 时使用 Validators.compose() 方法来组合多个验证器。以下是一个示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.compose([Validators.required, Validators.email])]
});
}
onSubmit() {
// Handle form submission
}
}
在上面的示例中,我们使用 Validators.compose() 方法来将 Validators.required 和 Validators.email 组合为 email 字段的验证器。这样,只有当字段非空且为有效的电子邮件地址时,表单才被认为是有效的。
在模板中,我们使用 [disabled]
属性来禁用提交按钮,只有当表单有效时才启用。
上一篇:Angular ReactiveForms - 嵌套的FormGroup在FormArray中(未找到控件)
下一篇:Angular ReactiveForms FormArray removeAt方法会移除FormArray中的所有元素。