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

Question

我致力于应用条件字段逻辑。其中两个字段取决于它们的值。

要求： 比方说，我们有一个具有以下值的单选按钮：

Do you want to format this code: o Yes o No

如果用户选择“否”，则什么也不会发生。如果用户选择是，将会有另一个字段为：

Select formatting type: 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 时，它运行良好，但随后控制台因无数不必要的调用而变得混乱。

Answer 1

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

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 的 next 函数。这样它将运行有限次。

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

Angular 5 - How to add Conditional Fields on Form Value Change

angular

angular-reactive-forms