FormBuilder 控件导致“表达式在检查后已更改”异常

我有一个正在通过编程方式实例化的表单DynamicComponentLoader::loadIntoLocation。表单代码如下：

constructor (
    private _builder: FormBuilder
) {
    this.editForm = _builder.group({
        name: ['', Validators.required],
        email: ['', Validators.compose([Validators.required, Helpers.emailValidator])],
        phone: [''],
        phoneAlt: [''],
        location: [''],
        dob: [''],
        bio: [''],
    });
}

您会注意到某些表单没有验证器（据我所知，这与使用相同Validators.nullValidator，我已经对两者进行了测试）。

在我的模板中，我有以下代码（对于每个控件）：

<label for="phone">Contact Number <span *ngIf="!phone.valid">- {{e(phone)}}</span></label>
<input type="text" name="phone" id="phone" ngControl="phone" #phone="ngForm">

第一个没有验证器的控件在命中时会抛出以下异常两次!phone.valid模板的一部分：

EXCEPTION: Expression '!phone.valid in e@15:43' has changed after it was checked. Previous value: 'true'. Current value: 'false' in [!phone.valid in e@15:43]

我在任何时候都不会触摸控件或this.editForm初始创建后，因此，就我的代码而言，不应进行任何更改。

我知道我可以通过调用来抑制错误enableProdMode()但我宁愿解决问题而不是隐藏它。

编辑（2月8日）：此后，我尝试将模式的内容移至单独的页面，但错误仍然存​​在。这表明问题与我创建和加载模式的方式无关，而是与 ControlGroup 或 FormBuilder 有关。

问题的笨蛋 http://plnkr.co/edit/YBU0TRyGI4uMx2HCosqB?p=preview | 无模态的 Plunker http://plnkr.co/edit/KkgSU3I44CZGujsrfbE9?p=preview

谢谢qdouble https://github.com/qdouble为我解决这个问题角抖动 https://gitter.im/angular/angular?at=56b8d0a9939ffd5d15f677d0 chat.

该问题似乎是由 Angular 解析页面的顺序引起的。从上到下，ngIf="!phone.valid"之前正在解析phone.valid已初始化。通过在 if 语句中添加 catch 以确保它不为空，可以轻松解决此问题*ngIf="phone.valid === null ? false : !phone.valid"（或通过在输入后移动标签）。