11

我有一个通过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: [''],
    });
}

您会注意到某些表单没有验证器（据我所知，这与 using 相同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 | 无模态的 Plunker

4

3 回答 3

11

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

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

于 2016-02-08T17:41:22.120 回答
9

这是我遇到的问题。

Angular 2 引入了一项功能来更好地处理变更检测。Angular 2 放弃了摘要周期，转而采用单向流，它的速度大约提高了 3-10 倍，并且可以更好地处理异步逻辑。

@Component({
    ...
    changeDetection: ChangeDetectionStrategy.OnPush
})...

链接： 角度参考：https ://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

了解变更检测：https ://auth0.com/blog/understanding-angular-2-change-detection/

Angular 2 变更检测如何真正工作：http ://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

于 2017-01-16T19:58:49.573 回答
3

使用 ngAfterContentChecked 修复了我这边的错误

ngAfterContentChecked(): void {
    this.cd.detectChanges();
}
于 2020-12-26T18:08:55.597 回答