Angular2：ngIfディレクティブでラップするとngModelが機能しない

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です：これは最初のinputのため正常に動作しますhttp://plnkr.co/edit/3xrqCVv7qE1FQjdTdzXP

。

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) 

具体的には、生成されたコードが動作するもののために、次のようになります：それは*ngIfに包まれinputに基づいてクラスを設定しようとすると、エラーが発生し

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は、コンポーネントそのものなので、それは0を持っていない：それは動作しないもののために、このようになります。プロパティ（nameとemailのみ）。

Answer 1

* ngIf内で宣言された変数の外側に* ngを使用することはできません。

しかし、あなたはこれを使用することができます：

<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>