Why is 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

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

I came across the same error after upgrading angular to v14. I fixed the error by using the UntypedFromGroup as explained in the docs here:

https://angular.io/guide/typed-forms

as mentioned in Eliseo's comment angular 14 now uses typed forms by default. You can fix the IDE error by using UntypedFormGroup like this:

import { FormControl, UntypedFormGroup, Validators } from '@angular/forms';

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

    if (true) {
      formGroup.addControl('termsOfAgreement', new FormControl(''));
    }
  }

By using a UntypedFormGroup the addControl method will work just like in angular v13