FormBuilder控制引起＆QUOT;它检查＆QUOT后前pression发生变化的;例外 [英] FormBuilder Control causing "Expression has changed after it was checked" exception

问题描述

我有一个正在通过 DynamicComponentLoader编程实例化的形式:: loadIntoLocation 。形式为code是如下：

I have a form that is being instantiated programatically via DynamicComponentLoader::loadIntoLocation. The form code is below:

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 ，我已经与两个测试）。

You'll notice that some of the forms don't have validators (as far as I can tell, this is the same as using Validators.nullValidator, I've tested with both).

在我的模板，我有以下code（为每个控件）：

In my template I have the following code (for each control):

<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 模板的一部分：

The first control that doesn't have a validator throws the following exception twice when it hits the !phone.valid part of the template:

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 的初始创建后，所以，据我的code而言，没有什么应该改变

At no point am I touching the controls or this.editForm after the initial creation, so, as far as my code is concerned, nothing should be changing.

我知道，我可以通过调用 enableProdMode（）燮preSS错误，但我宁愿修复不是隐藏它的问题。

I'm aware that I can suppress the errors by calling enableProdMode() but I'd rather fix the problem than hide it.

修改（第8 2月）：因为我已经尝试过移动模式的内容，以一个单独的页面，但错误仍然存​​在。这表明问题是没有关系的，我创建并加载模态的方式，而是ControlGroup或FormBuilder。

Edit (8th Feb): I have since tried moving the contents of the modal to a separate page, but the errors persist. This would suggest the issue is not related to the way I am creating and loading the modals, but rather the ControlGroup or FormBuilder.

问题的Plunker | Plunker无模态

推荐答案

感谢 qdouble 解决这对我来说在角小胶质聊天。

Thanks to qdouble for solving this for me on the Angular Gitter chat.

这个问题似乎是由其中的角度解析的页面顺序造成的。通过从顶部到底下， ngIf =！phone.valid正在前 phone.valid 解析过初始化。这很容易被if语句添加一个catch，以确保它不是空 * ngIf =固定phone.valid ===空假的？！phone.valid（或移动后输入标签）。

The issue seemed to be caused by the order in which angular parsed the page. By going from top to bottom, ngIf="!phone.valid" was being parsed before phone.valid had been initialised. This was easily fixed by adding a catch in the if statement to make sure that it was not null *ngIf="phone.valid === null ? false : !phone.valid" (or by moving the label after the input).

这篇关于FormBuilder控制引起＆QUOT;它检查＆QUOT后前pression发生变化的;例外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！