Angular 11: FormGroup Code Which Worked Using Angular 10 Now Fails

[mylifeandcode]

🐞 bug report

Affected Package

The issue is caused by package @angular/angular (reactive_errors.ts)

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 10

Description

The code for one of my components fails with an error concerning the FormGroup. This code worked as-is under Angular 10, before upgrading to 11. I originally found this problem when running the unit tests for this component, and then replicated the issue live while running the app.

The error in question is: formGroup expects a FormGroup instance. Please pass one in.

🔬 Minimal Reproduction

I'm unable to share this code, but the component in question takes in an instance of FormBuilder as shown below:
constructor(private _formBuilder: FormBuilder, private _registrationService: RegistrationService) { }

Then, on ngOnInit(), it makes a call to a function which sets up the FormGroup:

async ngOnInit() {

    this.displayLoader = false;

    this.buildForm();

Here's the function which creates the FormGroup:

  private buildForm(): void {

    this.certEvalFilterForm = this._formBuilder.group({
      id: ['', [Validators.minLength(2) , Validators.pattern("^[0-9]*$") ]],
      firstName: ['', [Validators.minLength(2), this.nameValidator]],
      lastName: ['', [Validators.minLength(2), this.nameValidator]],
      examAdmin: ['', Validators.required],
      examName: '',
      issues: '',
      evalStatus: '',
      regDateFrom:  [ '', [ this.validateTodaysDate ,this.validateToFromDates('regDateFrom', 'regDateTo' ) ] ], 
      regDateTo: ['', [ this.validateTodaysDate , this.validateToFromDates('regDateFrom', 'regDateTo' ) ] ],
      attempt: '',
      isFinalEval: false
    });
  }

🔥 Exception or Error

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:

       
    

      
    

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.missingFormException (reactive_errors.ts:38)
    at FormGroupDirective._checkFormPresent (form_group_directive.ts:300)
    at FormGroupDirective.ngOnChanges (form_group_directive.ts:98)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471)
    at callHook (core.js:2490)
    at callHooks (core.js:2456)
    at executeInitAndCheckHooks (core.js:2408)
    at selectIndexInternal (core.js:8181)
    at Module.ɵɵadvance (core.js:8164)
    at CertEvalFilterComponent_Template (cert-eval-filter.component.html:12)
defaultErrorLogger @ core.js:5967
core.js:5967 ERROR TypeError: Cannot read property 'get' of undefined
    at FormGroupDirective.addControl (form_group_directive.ts:140)
    at FormControlName._setUpControl (form_control_name.ts:207)
    at FormControlName.ngOnChanges (form_control_name.ts:146)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471)
    at callHook (core.js:2490)
    at callHooks (core.js:2456)
    at executeInitAndCheckHooks (core.js:2408)
    at selectIndexInternal (core.js:8181)
    at Module.ɵɵadvance (core.js:8164)
    at CertEvalFilterComponent_Template (cert-eval-filter.component.html:12)

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.5
Node: 12.14.1
OS: win32 x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.5
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            11.0.5
@angular-devkit/schematics      11.0.5
@angular/cdk                    8.2.3
@angular/http                   7.2.16
@schematics/angular             11.0.5
@schematics/update              0.1100.5
ng-packagr                      11.0.3
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

[mylifeandcode]

Here is part of the template code, including the line mentioned in the exception stack trace:

<div class="form">
    
    <form [formGroup]="certEvalFilterForm" autocomplete="off" novalidate (ngSubmit)="submit()">

        <div class="row">

            <!-- Exam Admin -->
            <div class="col-xs-3 col-md-3 col-lg-3 form-group">
                <label for="examAdmin" data-toggle="tooltip" title="An Exam Admin is required field." class="required-field">Exam Admin</label>
                <select formControlName="examAdmin" class="form-control">
                    <option value="" selected>Select...</option>
                    <option *ngFor="let o of examAdminOptions" [value]="o.value">{{o.label}}</option>
                </select>   
            </div>
            <!-- (end) Exam Admin -->

[destus90]

Try this as a workaround

<form [formGroup]="certEvalFilterForm" *ngIf="certEvalFilterForm" ...>

[mylifeandcode]

Try this as a workaround

<form [formGroup]="certEvalFilterForm" *ngIf="certEvalFilterForm" ...>

Thanks for the suggestion. I've tried that, as well as moving the code that makes the call to set up the FormGroup from ngOnInit() into the constructor, but that's led to a different issue wherein I'll need to qualify all of my FormGroup.controls calls with the Elvis operator, because I get this error:

Cannot read property 'controls' of null

It was all working as-is with Angular 10. Fortunately, this is the only component that's affected, but still, I'd love for there to be a different solution to code which had been previously working than to refactor. Worst case, I can take the above approaches.

[mylifeandcode]

Though, if I use both the *ngIf workaround and the movement of that FormGroup setup call to the constructor, I'm not sure why I'd ever have a null FormGroup. :(

[AndrewKushnir]

@mylifeandcode, thanks for reporting the problem.

In order to speed up further investigation it'd be great if you put together a minimal repro using Stackblitz. Note: we don't need real code from your app, just the minimal set of a template elements (with all non-relevant fields removed) and component code (with simplified/renamed properties).

Also additional question: did you use Ivy in v10 and v11 or you just switched to Ivy after upgrading to v11?

Thank you.

[AndrewKushnir]

@mylifeandcode, one more idea for debugging: could you please try to use @angular/forms from v10 major version (for ex. v10.0.0) and most recent version of other packages (v11.0.5). That should help to detect whether the regression that you are describing is coming from the Forms package itself or from other Angular packages.

[mylifeandcode]

Hi @AndrewKushnir ! Thank you for the help. I'll give the @angular/forms suggestion a try, and will look into producing a minimal example in StackBlitz as well. In the meantime, I've narrowed down the issue to the validateToFromDates() custom validator being used here when I set up my FormGroup (currently called from the component's constructor, but previously called from ngOnInit()):

    this.certEvalFilterForm = this._formBuilder.group({
      abimId: ['', [Validators.minLength(2) , Validators.pattern("^[0-9]*$") ]],
      firstName: ['', [Validators.minLength(2), this.nameValidator]],
      lastName: ['', [Validators.minLength(2), this.nameValidator]],
      examAdmin: ['', Validators.required],
      examName: '',
      issues: '',
      evalStatus: '',
      regDateFrom:  [ '', [ this.validateTodaysDate ,this.validateToFromDates('regDateFrom', 'regDateTo' ) ] ], 
      regDateTo: ['', [ this.validateTodaysDate , this.validateToFromDates('regDateFrom', 'regDateTo' ) ] ],
      attempt: '',
      isFinalEval: false
    });

The implementation of the validateToFromDates() validator is shown below. When I added the Elvis operator, the exception went away, but this hadn't been required under Angular 10:

  private validateToFromDates(fromDateControlName: string, toDateControlName : string ): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      
      let formGroup: FormGroup = <FormGroup>control.parent;
      if (formGroup === undefined) {return null; } 

      let fromControlValue = formGroup?.controls[fromDateControlName].value;
      let toControlValue = formGroup?.controls[toDateControlName].value;

      if (fromControlValue && toControlValue && fromControlValue > toControlValue ){
        return { 'invalidRange': true };
      }

       // current contol pass validation so check other control validity
      if (control === formGroup?.controls[fromDateControlName] && 
          fromControlValue && 
          toControlValue && 
          formGroup?.controls[toDateControlName].errors && 
          formGroup?.controls[toDateControlName].errors.invalidRange)
      {
        //console.log('This is fromDateControlName with value=' + fromControlValue);
        formGroup?.controls[toDateControlName].updateValueAndValidity();
      }

      if (control === formGroup?.controls[toDateControlName] && 
          fromControlValue && 
          toControlValue && 
          formGroup?.controls[fromDateControlName].errors && 
          formGroup?.controls[fromDateControlName].errors.invalidRange)
      {
       // console.log('This is toDateControlName with value=' + toControlValue);
        formGroup?.controls[fromDateControlName].updateValueAndValidity();
      } 
      return null;
  }}

To answer your question about Ivy, we've never explicitly opted in or out of Ivy. If my understanding is correct, it was an opt-in process under Angular 8, but became default in Angular 9. The angular.json file from our Angular 10 version doesn't include the enableIvy property anywhere, so my understanding was that we were using Ivy at that time.

[AndrewKushnir]

I'll give the @angular/forms suggestion a try, and will look into producing a minimal example in StackBlitz as well

Thank you. For the minimal repro, please remove all fields that are not essential for the repro (I see you have 11 fields currently, but I believe 1 field and 1 validator should be enough). Also simplifying the validateToFromDates (to just return null or an error object) should be helpful.

Also, I noticed a couple things in the validator function that you mentioned:

• You are checking 2 fields: fromDateControlName (presumably regDateFrom from your example) and toDateControlName (which is likely regDateTo). I think a better approach might be to setup a validator function at the FormGroup level where you can access both child controls and verify their states, see Form Validation guide and also FormBuilder.group API (second argument). The idea is to keep only field-related validators on the control itself (i.e. validators that only require a value of a particular control to perform a check), when all cross-field checks can be placed at the parent FormGroup level.
• There are some updateValueAndValidity calls inside the validator, which in turn trigger new validation round before the current one is completed (since we are in the middle of the validation when a given validator function is invoked). This looks tricky and might potentially cause unnecessary re-computations and/or some unexpected state or execution order, so if there is a chance to refactor the code to remove these calls - that'd probably be helpful as well (I believe moving validator logic to the FormGroup level should help avoid these calls).

To answer your question about Ivy, we've never explicitly opted in or out of Ivy. If my understanding is correct, it was an opt-in process under Angular 8, but became default in Angular 9. The angular.json file from our Angular 10 version doesn't include the enableIvy property anywhere, so my understanding was that we were using Ivy at that time.

Thanks for clarification. Yes, Ivy became default in v9 and the stacktrace that you shared contains Ivy-related codepaths, so most likely Ivy was used for both v10 and v11 in your case.

[mylifeandcode]

Hi @AndrewKushnir ! Thank you very much for the insight and guidance on those validators! I'll add an item to our backlog to make those changes.

In the meantime, I've set up two examples on StackBlitz: one is in Angular 11 and reproduces the problem we're experiencing. The other is the same exact code, but in Angular 10, and the problem does not exhibit itself there.

Here are the links:

Angular 11 with the problem: https://stackblitz.com/edit/angular11formgrouperror?file=src/app/app.component.html
Same code in Angular 10 without the problem: https://stackblitz.com/edit/angular10formgroupnoerror?file=src/app/app.component.html