首页 文章

Angular 5 - 如何在表单值更改上添加条件字段

提问于
浏览 次
0

我正致力于应用条件场逻辑 . 两个字段取决于它们的值 .

Requirement: 设's say, we'一个带有以下值的单选按钮：

是否要格式化此代码：o是o否

如果用户选择，否，没有任何反应 . 如果用户选择是，则会有另一个字段，如下所示：

选择格式化类型：o HTML o PHP o Javascript

我正在使用https://toddmotto.com/angular-dynamic-components-forms方式生成表单，我们将设置传递给FormGroup并生成表单 .

我试过的方式：

this.form.valueChanges
.subscribe(values => {
    if(value['require_formatting'] === 'yes') {
        this.form.addControl('formatting_type', myFormControl); // Add new form control
    }
});

不幸的是，这给了我“最大调用堆栈大小超出错误 . 当我在添加表单控件之前添加setTimeout它运行良好但是然后控制台变得混乱有无数次的不必要的调用 .

angular angular-reactive-forms

1 回答

  • 2

    尝试将代码更改为以下内容：

    this.form.valueChanges
.subscribe(values => {
    if(value['require_formatting'] === 'yes' && this.form.get('formatting_type')) {
        this.form.addControl('formatting_type', myFormControl); // Add new form control
    }
});

    它应该只通过运行if语句中的代码一次来消除堆栈溢出 .

    问题是if语句中的代码在无限循环中调用observable的下一个函数 . 这样它将运行有限次数 .

    回复于

相关问题