Angular 2 : ngModel not working when wrapped with an ngIf directive

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 工作正常。当它尝试根据包装在 *ngIf 中的 input 设置类时发生错误:

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>