I have a FormArray 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 FormGroup into the FormArray getting this error:

Argument of type 'FormGroup' 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
}

CodePudding user response：

try:

this.rules.controls.push(group);

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

CodePudding user response：

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> {
  ...
}