Angular 2 使用模板引用变量 ngForm 作为输入绑定

【问题标题】：Angular 2 using template reference variable ngForm as input bindingAngular 2 使用模板引用变量 ngForm 作为输入绑定
【发布时间】：2016-06-15 17:31:19
【问题描述】：

我正在构建一个输入“有效”的组件。如果我将值绑定到父组件的成员，一切都会很好。但是，如果我将它绑定到这样的模板引用

<step [valid]="name.valid">

      <input type="text" name="name"
             #name="ngForm"
             [(ngModel)]="name"
             required>

</step>

我明白了

表达式在检查后发生了变化。以前的值：“真”。当前值：'false'

我部分理解。我知道 ngForm 有效检查发生在组件初始化之后，因此值已经改变。我不明白为什么这是一个问题，为什么可以通过调用 enableProdMode() 来解决，为什么 enableProdMode() 是个坏主意。

我也试过 ChangeDetectorRef 使用 .detach() 和 .reattach() 来临时禁用更改检测，但这并没有解决问题，而且听起来也是个坏主意。

有什么想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

这是一个已知问题。改为使用

<form #f="ngForm">
  <step [valid]="f.controls['name'].valid">

【讨论】：

谢谢。如果我尝试得到 Error: Uncaught (in promise): Cannot assign to a reference or variable!
更多细节什么不能分配给什么？
您使用的是哪个 Angular2 版本？你的<form> 标签是什么样子的？
我使用的是 2.0.0-rc.1，表单看起来像
。对不起，我认为那个错误是无关的。我是否还需要在输入元素上保留 #name="ngForm" ？如果我这样做，我会得到未捕获（承诺）：模板解析错误：没有将“exportAs”设置为“ngForm”的指令（“如果我不这样做，我会得到 TypeError：无法读取未定义的属性“有效”
不，你不需要#name="ngForm"，但你需要一些方法来使输入成为一个Angular表单控件。尝试添加 ngControl="name" 然后 #name="ngForm" 不应该再抛出（以防你需要它来做其他事情）。