动态addControl到formgroup Angular 5

Question

尝试在Angular中向formGroup动态添加一个新的formControl条目.

method() {
  this.testForm.addControl('new', ('', Validators.required));
}

可以这样做吗？

Answer 1

当然,但第二个参数应该是FormControl实例.就像是:

this.testForm.addControl('new', new FormControl('', Validators.required));

如果需要,还可以使用'setValidators'方法动态添加验证器.

信息在这里:https://angular.io/api/forms/FormGroup#addControl

Answer 2

如果要FormBuilder用于表单，则还可以使用它来添加控件：

constructor(private fb: FormBuilder) { }

method() {
  this.testForm.addControl('new', this.fb.control('', Validators.required));
}

Answer 3

简单使用：

  this.testForm.addControl('new', this.fb.group({
      name: ['', Validators.required]
    }));

Answer 4

Angular 14 添加了表单输入功能。新语法如下：

表格申报

public form = new FormGroup<{ new?: FormControl<string | null> }>();

请注意，该new控件必须声明为可选。addControl如果未首先声明该字段，您将无法使用。

对于更大的表单，您可以使用接口：

interface MyForm {
    field1: FormControl<string | null>;
    field2: FormControl<string | null>;
    new?: FormControl<string | null>;
}

public form = new FormGroup<MyForm>({
    field1: new FormControl<string | null>('', Validators.required),
    field2: new FormControl<string | null>('', Validators.required),
});

向表单添加控件

this.form.addControl('new', new FormControl<string | null>('', Validators.required));