Angular 14 reactive forms addControl not working

Question

I recently migrated to Angular 14 and this line of code is throwing an exception when trying to dynamically add new from controls:

formGroup.addControl("agreement", new FormControl(""));

error:

error TS2769: No overload matches this call. 
FormControl<...>; }>' is not assignable to method's 'this' of type 'FormGroup<{ [key: string]: AbstractCont

rol<any, any>; }>'. ....

when hovering over the line with error I get this text:

Add a control to this group. In a strongly-typed group, the control must be in the group's type (possibly as an optional key). If a control with a given name already exists, it would not be replaced with a new one. If you want to replace an existing control, use the FormGroup#setControl setControl method instead. This method also updates the value and validity of the control. Is there a workaround for this?

Please find here the problem: stackblitz demo

UPDATE:

This is the full code causing the problem:

 private test_formGroup() {
    const formGroup = new FormGroup({
      requestReference: new FormControl(''),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl('', Validators.required),
      requestDetails: new FormControl(''),
    });

    if (true) {
      //real condition here
      formGroup.addControl('termsOfAgreement', new FormControl(''));
    }
  }

if I add the control at the FormGroup generation it works:

  const formGroup = new FormGroup({
      requestReference: new FormControl(''),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl('', Validators.required),
      requestDetails: new FormControl(''),
      termsOfAgreement: new FormControl('')
    });

    if (true) {
      //real condition here
      formGroup.addControl('termsOfAgreement', new FormControl(''));
    }

but what happens when you have complex logic and you don't know from the beginning all the controls that need to be added?! what's the benefit of "addControl" if you need to specifically add it at the FormGroup creation time ?!

Answer 1

you can't add a fromControl directly like that , you need to use the formBuilder and formGroup.

method 1 :

 addControl(): void {
      this.formGroup = this.fb.group({
         ...this.formGroup.controls,   // <-- push to the existing formGroup controls
         agreement: [''],
      });
    }

method 2 :

addControl(): void {
    this.formGroup.addControl('agreement', this.fb.control(''));
}

i have fixed your code in stackblitz too :

import { Component, Input } from '@angular/core';
import {
  FormControl,
  FormGroup,
  Validators,
  FormBuilder,
} from '@angular/forms';

@Component({
  standalone: true,
  selector: 'app-name',
  template: `
    <ng-content></ng-content>, {{ name }}.
  `,
  styles: [``],
})
export class NameComponent {
  formgroup: FormGroup;
  constructor(private fb: FormBuilder) {}
  @Input() name = '';

  private test_formGroup() {
    this.formgroup = new FormGroup({
      requestReference: new FormControl(''),
      emailRecipient: new FormControl([Validators.required, Validators.email]),
      emailBodyMessage: new FormControl('', Validators.required),
      requestDetails: new FormControl(''),
    });
    this.fb.group(this.formgroup);
    if (true) {
      //real condition here
      this.formgroup.addControl('termsOfAgreement', this.fb.control(''));
    }
  }
}

you have no more errors :