Angular Reactive Forms - Push FormGroup into FormArray

Question

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
}

Try providing the generic argument: public rules = new FormArray<FormGroup<any>>([]) — SirOneOfMany
– SirOneOfMany, Commented Dec 27, 2022 at 14:17

GheistLycis · Accepted Answer · 2022-12-27 20:53:49Z

3

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.

edited Dec 27, 2022 at 20:53

answered Dec 27, 2022 at 14:18

GheistLycis

1048 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yong Shun · Accepted Answer · 2022-12-27 14:23:58Z

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

To solve the compiler error:

Create a type for the FormGroup.
Specify the rules type as FormArray<FormGroup<RuleForm>>.
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> {
  ...
}

Both the answers are working.. I am marking @GheistLycis answer as correct.

Collectives™ on Stack Overflow

Angular Reactive Forms - Push FormGroup into FormArray

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related