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

Question

我正在构建一个带有输入参数“valid”的组件。如果将该值绑定到父组件的成员上，一切正常。但是，如果将其绑定到模板引用中，如下所示：

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

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

</step>

我遇到了这个问题：

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

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

我还尝试使用 ChangeDetectorRef 的 .detach() 和 .reattach() 方法来暂时禁用变更检测，但这并没有解决问题，听起来也不是一个好建议。

您有什么想法吗？

- Daco

Answer 1

这是一个已知问题。请使用

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

- Günter Zöchbauer

---

谢谢。如果我尝试那样做，我会收到错误提示：无法将参考或变量分配！ - Daco

还有一些细节是什么不能分配给什么？ - Günter Zöchbauer

你使用的是哪个Angular2版本？你的<form>标签是什么样子的？ - Günter Zöchbauer

我使用的是2.0.0-rc.1版本，表单看起来像这样<form #f="ngForm">。对不起，我觉得那个错误与此无关。我是否还需要在输入元素上保留#name="ngForm"？如果我这样做，会出现以下错误：未捕获的（在承诺中）：模板解析错误： 没有将"exportAs"设置为"ngForm"的指令（"如果我不这样做，会出现以下错误：类型错误：无法读取未定义的属性'valid'。 - Daco

不，你不需要 #name="ngForm"，但你需要一些方法将输入转换为 Angular 表单控件。尝试添加 ngControl="name"，然后 #name="ngForm" 就不会再出错了（如果你需要它做其他事情的话）。 - Günter Zöchbauer