TemplateRef for ngModel doesn't work when nested in *ngIf

[klinki]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Accessing ngModel using templateRef doesn't work when it is inside *ngIf statement.

Expected behavior

It should work.

Minimal reproduction of the problem with instructions

  <ng-container *ngIf="true">
    <mat-form-field>
      <mat-select [(ngModel)]="selectedValue" placeholder="Select value" #selectElBroken="ngModel">
        <mat-option *ngFor="let item of [1,2,3]" [value]="item">{{item}}</mat-option>
      </mat-select>
    </mat-form-field>
  </ng-container>

  {{selectElBroken?.dirty}}

selectElBroken will be undefined

https://stackblitz.com/edit/angular-rr54wp-template-form-bug

What is the motivation / use case for changing the behavior?

I need to get state of template-driven form field which is inside *ngIf.

Environment

Angular version: 6.1.4


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm pretty sure it is related to #8563

[pkozlowski-opensource]

Local vars (like #selectElBroken="ngModel") are scoped to a view (<ng-template> boundary in your case). You can not access inner vars from the outter view. What you are trying to do would be equivalent, in JS, to:

function outter() {
  function inner() {
    let selectElBroken = ...;
  }
  // trying to access selectElBroken here won't work
}

We need to have some rules for templates and keeping it in sync with JS function scoping is our guiding principle.

Closing as it works as designed.

[klinki]

Ok, thanks for the explanation. If I understand it correctly, it is impossible to achieve what I described?

If I use your example with function scoping, would it be possible to use some outer function variable to save the inner state?

something like

function outer() {
    let selectElBroken = null;

   function inner() {
          selectElBroken = ...;
   }
}

In language of angular templates, something like

<input type="hidden" [(ngModel)]="selectedValue" #selectElBroken="ngModel" />
 <ng-container *ngIf="true">
    <mat-form-field>
      <mat-select [(ngModel)]="selectedValue" placeholder="Select value" #selectElBroken="ngModel">
        <mat-option *ngFor="let item of [1,2,3]" [value]="item">{{item}}</mat-option>
      </mat-select>
    </mat-form-field>
  </ng-container>

  {{selectElBroken?.dirty}}

[klinki]

@pkozlowski-opensource Is there any workaround how to avoid this limitation?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}