AddControl 以角度动态调整到 FormGroup

您需要的是 addControl 。请注意，第二个参数必须是如下所示的 FormControl 实例:

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

如果需要使用 setValidators方法，还可以动态地添加验证器。调用此方法会覆盖所有现有的同步验证器。

如果在窗体中使用 FormBuilder，也可以使用它来添加控件:

constructor(private fb: FormBuilder) { }
    

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

简单使用:

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

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-component-name',
templateUrl: './component-name.component.html',
styleUrls: ['./component-name.component.scss']
})
export class ComponentName implements OnInit {


formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {}


ngOnInit() {
this.formGroup = this.formBuilder.group({
firstName: new FormControl('', Validators.required),
lastName:  new FormControl('', Validators.required),
});
}
    

// Add single or multiple controls here
addNewControls(): void {
this.formGroup = this.formBuilder.group({
...this.formGroup.controls,
email: ['', Validators.required],
phone: ['', Validators.required]
});
}
}

我在角度12中也遇到了同样的问题，下面的代码片段对我来说非常有用。

填写表格:

public form: FormGroup;

为窗体创建一个新控件:

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

角度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));