Angular响应式表单——将FormGroup推入FormArray

Question

我有一个FormArray，它将包含一些价格调整规则。每个规则包含一个FormGroup，每个FormGroup包含4个FormControl。当我试图将FormGroup推入FormArray时得到此错误:

'FormGroup'类型的实参不能赋值给'never'类型的形参。

public rules = new FormArray([]);

private getRuleFormGroup(): FormGroup {
return this._formBuilder.group({
from: new FormControl('', {
nonNullable: true,
validators: [Validators.required]
}),
to: new FormControl('', {
nonNullable: true,
validators: [Validators.required]
}),
increaseBy: new FormControl('', {
nonNullable: true,
validators: [Validators.required]
}),
increaseType: new FormControl('', {
nonNullable: true,
validators: [Validators.required]
})
});
}

private addNewRule(): void {
const group = this.getRuleFormGroup();
this.rules.push(group); //Getting error here
}

Answer 1

try:

this.rules.controls.push(group);

就像FormGroup将自己组织成控件一样，formmarray也是如此，每个控件要么是FormGroup，要么是松散的FormControl。

Answer 2

你会得到上面提到的错误，因为响应式表单在Angular 14中默认是严格类型的。

编译错误:

1. 为FormGroup创建一个类型

2. 指定rules类型为FormArray<FormGroup<RuleForm>>。

3. 修改getRuleFormGroup签名返回FormGroup<RuleForm>的类型

interface RuleForm {
from: FormControl<string>;
to: FormControl<string>;
increaseBy: FormControl<string>;
increaseType: FormControl<string>;
}

public rules: FormArray<FormGroup<RuleForm>> = new FormArray<
FormGroup<RuleForm>
>([]);
private getRuleFormGroup(): FormGroup<RuleForm> {
...
}