Angular2/4/5 - 响应式表单，你应该使用 AbstractControl 还是 FormControl？

Question

在我从事的不同项目中，我看到了以下两种不同的构建响应式表单的方法。推荐哪种方式？

使用 AbstractControl

  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'];
  }

使用 FormControl

  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 不是推荐的方法？

Answer 1

AbstractControl 是大多数表单控件的基础 class。根据文档，您应该使用子 class -- 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？

Angular2/4/5 - Reactive Forms, should you use AbstractControl or FormControl?

forms

reactive

angular