Angular 2在加载时禁用/启用反应表单元素

Question

我有一个动态响应式表单组件。你向它传递一组字段，它就会构建一个表单。

当我有一个复选框元素控制同一表单中的另一个元素是启用还是禁用时，我的问题就出现了。当控制复选框被更改时，我更新同级元素没有问题，但是当加载视图时，我得到了很好的旧 ExpressionChangedAfterItHasBeenCheckedError 错误（显然只在开发中）

public ngOnInit() {
    // If the element is a field controller subscribe to it's value changes
    if (this.elementVal.isFieldController === true) {
        // This is what's causing the issue
        this.toggleControlledFields(this.form.get(this.elementVal.key).value);
        this.form.get(this.elementVal.key).valueChanges
            .subscribe((data) => {
                console.log(data, 'the data');
                this.toggleControlledFields(data);
            });
    }
}

fieldController 可以控制一个或多个值，因此我循环遍历每个值并禁用或启用它控制的字段：-

public toggleControlledFields(value) {
    if (value === '' || value === false) {
        this.elementVal.fieldsToControl.forEach((field) => {
            this.form.get(field).disable();
        });
    } else {
        this.elementVal.fieldsToControl.forEach((field) => {
            this.form.get(field).enable();
        });
    }
}

因为我这样做onInit 我收到了错误消息，所以我尝试添加detectChanges() 并且尝试了不同的生命周期挂钩，但我终生无法解决问题。任何帮助将不胜感激。

Answer 1

所以我添加了带有检测更改的以下生命周期挂钩，这似乎解决了我的问题，也许这对其他人有帮助..

constructor(private cd: ChangeDetectorRef) {}

public ngAfterViewInit() {
    this.cd.detectChanges();
}