Why is Angular 14 reactive forms addControl not working?

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?

Continue reading...