加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:28:16 所属栏目:安全 来源:网络整理
导读:我有一个动态的反应形式组件.你传递一组字段,然后构建一个表单. 当我有一个checkbox元素控制是否启用或禁用同一表单中的另一个元素时,我的问题就来了.更改控制复选框时更新兄弟元素没有问题,但是当加载视图时,我得到了旧的ExpressionChangedAfterItHasBeenCh
我有一个动态的反应形式组件.你传递一组字段,然后构建一个表单.

当我有一个checkbox元素控制是否启用或禁用同一表单中的另一个元素时,我的问题就来了.更改控制复选框时更新兄弟元素没有问题,但是当加载视图时,我得到了旧的ExpressionChangedAfterItHasBeenCheckedError错误(显然只在dev中)

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()并且我尝试了不同的生命周期钩子,但是对于我的生活无法解决问题.任何帮助将不胜感激.

解决方法

所以我添加了下面的生命周期钩子,检测变化,这似乎解决了我的问题,也许这将有助于其他人..

constructor(private cd: ChangeDetectorRef) {}

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读