Angular2: ngModel не работает, когда он завернут директивой ngIf

Question

Я вижу ошибку «Не могу прочитать свойство» недействительной «неопределенной» при попытке ссылаться на директиву NgModel с помощью ссылочной переменной шаблона - но только когда она завернута в *ngIf.

Вот пример формы, которая демонстрирует проблему:

<form (ngSubmit)="true"> 
    <div [ngClass]="dom_email_ok.valid ? 'one' : 'two'"> 
    <span><input [(ngModel)]="email" #dom_email_ok="ngModel" required name="email" /></span> 
    </div> 
    <div [ngClass]="dom_email_bad.valid ? 'one' : 'two'"> 
    <span *ngIf="true"><input [(ngModel)]="email" #dom_email_bad="ngModel" required name="email" /></span> 
    </div> 
</form> 

Вот Plunker: http://plnkr.co/edit/3xrqCVv7qE1FQjdTdzXP

Это прекрасно работает для первого input. Ошибка возникает при попытке установить класс, основанный на input завернутого в *ngIf:

TypeError: Cannot read property 'valid' of undefined 
    at CompiledTemplate.proxyViewClass.View_App0.detectChangesInternal (/AppModule/App/component.ngfactory.js:259:51) 
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (https://unpkg.com/@angular/core/bundles/core.umd.js:12726:18) 

В частности, генерируемый код выглядит следующим образом тот, который работает:

var currVal_8_0_0 = (self._NgModel_11_7.context.valid? 'one': 'two'); 

... и, похоже, это тот, который не работает:

var currVal_14_0_0 = (self.context.dom_email_bad.valid? 'one': 'two'); 

В этой функции self.context является сам компонент, поэтому он не имеет dom_email Недвижимость (только name и email).

Answer 1

Вы не можете использовать за пределами * ngIf переменную, объявленную внутри * ngIf.

Но вы можете использовать это:

<div> 
    <h2>Hello {{name}}</h2> 
    <form (ngSubmit)="true"> 
    <div [ngClass]="dom_email_ok.valid ? 'one' : 'two'"> 
     <span><input [(ngModel)]="email" #dom_email_ok="ngModel" required name="email" /></span> 
    </div> 
    <div [ngClass]="dom_email_bad.valid ? 'one' : 'two'" *ngIf="true"> 
     <span ><input [(ngModel)]="email" #dom_email_bad="ngModel" required name="email" /></span> 
    </div> 
    </form> 
</div>