4

这是我之前关于 Angular2 中的嵌套表单（带有 TS 的 beta 3）的文章的延续（Angular2 beta: nesting form-b​​ased parent/child components and validate from parent），但我发布了一个新问题，因为它指到不同类型的问题。

您可以在http://plnkr.co/edit/iCmmy9at2wF5qY0P6VmV找到此处描述的问题的重现。简而言之，在这个假场景中，我有一个组件代表一个虚构字典中的单个单词，另一个子组件用于表示该单词的每个含义；因此，父组件与其子组件之间存在一对多的关系。两者都有一个基于表单的模板，使用表单构建器构建。子模板位于 a中，我在其中绑定来自父 (=word) 模型的每个意义。这样，每个词义的所有属性都会自动绑定到词的模型。NgFor

其中一些属性附加了几个验证器（自定义或标准）。我的问题是，当我以编程方式从父组件设置单词模型时（这也意味着设置表单控件的值），这似乎在验证过程中触发了一些竞争条件，这引发了几个类型为EXCEPTION: Expression ' !definitionCtl.valid' 在检查后已更改。以前的值：“真”。当前值： 'false'，阻止进一步的代码执行。

AFAIK，似乎与此问题相关的唯一信息在这里：

然而，这些讨论似乎还没有解决我的问题，除非（如果我理解得很好）我选择手动管理我的所有绑定，我想避免这种情况，因为在现实世界的应用程序中会有有很多。有人可以帮忙吗？

4

2 回答 2

1

我有这个问题。在https://github.com/angular/angular/issues/6005中有很多关于这个的讨论。我们有不同的情况和解决方案（我刚刚在该页面上列出了它）。

  • 我们的 Angular 应用程序 - https://github.com/GeoscienceAustralia/GNSS-Site-Manager具有模型响应式表单，这些表单嵌套并构建在ngOnInit(). 其中一些表单ngIf在模板中被折叠起来
  • 数据也在 a 中读入，ngOnInit()并与 a 一起应用theModelForm.patchValue(data)
  • 当其中一个折叠的表单展开时，此错误浮出水面。这与没有构建 DOM 的事实有关，因为表单是在 DOM 中创建的ngOnInit()，直到它被扩展才触发。拿出来patchValue()问题就解决了
  • 我们提出了两种解决方案
    1. 在patchValue()运行之前this._changeDetectionRef.detectChanges();。并将 更改ngIf为 a[hidden]以便完全构建表单和 DOM。这样做的不利方面是创建完整表单和相关 DOM 时的时间和内存成本（这在许多应用程序中可能不是问题，但对我们来说却是因为我们有一个巨大的表单）。
    2. 更好的解决方案是在组件中应用patchValue()（或者setValue()如果数据和字段是 1:1），因此只有在创建表单时才会发生ngOnInit().

我还没有提交这些更改（22/3/17）。

于 2017-03-22T01:56:40.603 回答
0

您可以尝试禁用 Angular2 开发模式：

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {enableProdMode} from 'angular2/core';

enableProdMode();

bootstrap(App, [])
  .catch(err => console.error(err));

有关更多详细信息，请参阅 Günter 的答案：

于 2016-02-05T09:20:30.687 回答