@ViewChild reference to form is undefined in Angular with *ngIf

Question

I have been trying to resolve this for a while and have tried several solutions from stackoverflow with no luck. e.g. @ViewChild in *ngIf

It was working ok when I loaded the customer on init but now I subscribe to the user and customer and this is causing problems.

When I click the save button (from outside the form) to trigger the form onSubmit it does not work as formCustomerDetailsRef is undefined even if I have a valid customer and I can see the form.

I have also tried using changeDetector.detectChanges(); and ngZone however these did not help.

I tried the following technique but it did not work either: https://stackoverflow.com/a/41095677/10222449

I am using Angular 8.

export class HomeComponent implements OnInit, OnDestroy {
@ViewChild('formCustomerCtrl', { static: false }) formCustomerDetailsRef: FormGroupDirective;

...

 ngOnInit(): void {
    const sub = this.authService.currentAppUser$.subscribe(appUser => {
      this.appUser = appUser;
      if (appUser) {
        this.getCustomer();
        this.getSettings();
        this.getCountries();
      }
    }
...

getCustomer() {
    const sub = this.customerService.currentCustomer$.subscribe(async customer => {
      this.customer = customer;
      
...

 onSubmitCustomerForm() {
    this.formCustomerDetailsRef.onSubmit(undefined);
}

<ng-container *ngIf="customer">
    <div *ngIf="fbUserAuthClaims?.admin" class="button btn_2" (click)="onSubmitCustomerForm()">
      <img src="assets/icons/link.svg">Save Changes
    </div>
...

<article *ngIf="tabCompanyProfileSelected">
    <form *ngIf="customer" [formGroup]="formCustomerDetails" (ngSubmit)="onUpdateCustomer()" #formCustomerCtrl="ngForm">
...

Alternative code which also does not work:

private formCustomerDetailsRef: FormGroupDirective;
  @ViewChild('formCustomerCtrl', { static: false }) set content(content: FormGroupDirective) {
     if (content) { // initially setter gets called with undefined
          this.formCustomerDetailsRef = content;
     }
  }

What's wrong with implementing https://stackoverflow.com/a/41095677/1016004? — Robin De Schepper, May 19 '20 at 00:29
@RobinDeSchepper I also tried that but it didn't fix the issue. I will add that to the question description. — MadMac, May 19 '20 at 01:05
Yea I saw that you linked it but why didn't it work? Did you try adding some console logs to the setter to find out at what times the setter is called? You could link the ngIf condition to a button, click it and see if something prints. If not, try to make a new project with just the ngIf, ViewChild and button. — Robin De Schepper, May 19 '20 at 01:24
I tried that and the setter is never called not even at the start. — MadMac, May 19 '20 at 03:42
Did you also try `@ViewChild(FormGroupDirective) formCustomerDetailsRef: FormGroupDirective` ? — Andrei Gătej, May 19 '20 at 06:49
@AndreiGătej I just gave that a go and I get the same issue. I used "@ViewChild(FormGroupDirective, { static: false }) formCustomerDetailsRef: FormGroupDirective;" I think I will have to start an new project to test in a controlled environment as Robin suggests above. — MadMac, May 20 '20 at 21:49
@RobinDeSchepper I tried the setter again with another page and it worked fine so not sure what the deal was with my original code. — MadMac, Jun 19 '20 at 00:22

score 1 · Answer 1 · answered Jun 19 '20 at 00:21

As @Robin pointed out in the comments the solution is to use a setter.

Solution here:

https://stackoverflow.com/a/41095677/10222449

Just remember to set static = false.

https://stackoverflow.com/a/57508471/10222449

Example:

  addressElementRef: ElementRef;
  @ViewChild('address', { static: false }) set content(content: ElementRef) {
    if (content) { // initially setter gets called with undefined
        this.addressElementRef = content;
    }
  }

@ViewChild reference to form is undefined in Angular with *ngIf

1 Answers1