Push FormGroup inside FormArray in Angular Reactive Forms

Question

I have formArray of which will contain some price adjustment rules. Each rule will contain a FormGroup and each FormGroup with 4 formControls. When I am trying to push the the FormGroup the FormArray getting this error 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

try:

this.rules.controls.push(group);

Just as FormGroups organize themselves into controls, FormArrays also do, each control being a FormGroup or even a loose FormControl.

Answer 2

You get the mentioned error as reactive forms are strictly typed by default from Angular 14 .

To solve the compiler error:

1. Create a type for the FormGroup .

2. Specify the rules type as FormArray<FormGroup<RuleForm>> .

3. Modify getRuleFormGroup signature to return the type of 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> {
  ...
}