validation - 导致 "Expression has changed after it was checked"异常的 FormBuilder 控件

Question

我有一个通过 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 相关。

Plunker of the issue | Plunker without modal

Answer 1

感谢qdouble在 Angular Gitter 上为我解决这个问题聊天。

问题似乎是由 Angular 解析页面的顺序引起的。从上到下，ngIf="!phone.valid" 在 phone.valid 初始化之前被解析。这很容易通过在 if 语句中添加一个 catch 来确保它不是 null *ngIf="phone.valid === null ? false : !phone.valid" (或通过移动输入后的标签)。