在我从事的不同项目中,我看到了以下两种不同的构建响应式表单的方法。推荐哪种方式?
使用抽象控件
public form: FormGroup;
public fb: FormBuilder;
public to: AbstractControl;
public subject: AbstractControl;
public body: AbstractControl;
private ngOnInit() {
this.form = this.fb.group({
'to': ['', Validators.compose([Validators.required, emailValidator])],
'subject': ['', Validators.compose([Validators.required])],
'body': ['', Validators.compose([Validators.required])],
});
this.to = this.form.controls['to'];
this.subject = this.form.controls['subject'];
this.body = this.form.controls['body'];
}
使用表单控件
public form: FormGroup;
public fb: FormBuilder;
public to: FormControl;
public subject: FormControl;
public body: FormControl;
private ngOnInit() {
this.form = this.fb.group({
'to': ['', Validators.compose([Validators.required, emailValidator])],
'subject': ['', Validators.compose([Validators.required])],
'body': ['', Validators.compose([Validators.required])],
});
this.to = new FormControl['to'];
this.subject = new FormControl['subject'];
this.body = new FormControl['body'];
}
我还发现 docs here声明 AbstractControl 不应直接实例化,那么这是否意味着方法 1 不是推荐的方法?
最佳答案
AbstractControl 是大多数表单控件的基类。根据文档,您应该使用子类——FormControl——来实例化表单控件,主要是在获取每个 ui 对象的值和验证器状态的地方。
const body = new FormControl({value: 'n/a', disabled: true});
console.log(body.status); // disabled
console.log(body.value); // n/a
关于Angular2/4/5 - 响应式表单,你应该使用 AbstractControl 还是 FormControl?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48252476/