在 Angular 中推送 FormArray 內的 FormGroup 反應式 Forms

Question

我有 formArray 其中將包含一些價格調整規則。 每個規則將包含一個 FormGroup，每個 FormGroup 有 4 個 formControl。 當我嘗試推送 FormGroup 時，FormArray 收到此錯誤Argument of type 'FormGroup<any>' is not assignable to parameter of type '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

嘗試：

this.rules.controls.push(group);

正如 FormGroups 將自己組織成控件一樣，FormArrays 也是如此，每個控件都是一個 FormGroup 甚至是一個松散的 FormControl。

Answer 2

您會收到上述錯誤，因為默認情況下，反應式 forms 是從 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> {
  ...
}