Angular两个输入控件互相联动如何避免最大调用栈溢出错误

两个表单控件的valueChanges订阅形成了触发闭环：输入框值变化修改复选框启用状态，复选框状态变化又修改输入框的值和启用状态，双向反复触发事件导致调用栈溢出。同时代码存在笔误：表单定义的变量名为testForm，但订阅逻辑里错误使用了orderSheetForm。

这里提供两种实现方案，可根据业务复杂度选择：

方案一：模板直接绑定disabled属性（更简洁，无订阅逻辑） #

不需要在控制器里写任何订阅代码，直接在模板通过表单控件的状态判断禁用条件即可：

<form [formGroup]="testForm">
    <div>
      <label for="showText">show Text</label>
      <input
      formControlName="showTextInput"
      id="showText"
      type="text"
      [disabled]="testForm.get('showCheckbox').value"
      />
   </div>
   <div>
    <input
    formControlName="showCheckbox"
    id="showCheckBox"
    type="checkbox"
    [disabled]="testForm.get('showTextInput').value?.length > 0"
    />
    <label for="showCheckBox">show</label>
   </div>
</form>

控制器只需要保留表单初始化逻辑即可，不需要额外订阅代码。

方案二：响应式表单订阅（适合后续有复杂扩展逻辑的场景） #

在修改表单控件值、切换启用/禁用状态时，添加{emitEvent: false}配置，阻止操作触发valueChanges事件，切断循环触发链路，同时修正笔误：

import { Component, OnInit } from '@angular/core';
import {
  FormGroup,
  FormBuilder,
} from '@angular/forms';

@Component({
  selector: 'order-sheet',
  templateUrl: './test-form.component.html',
  styleUrls: ['./test-form.component.css'],
})
export class TestController implements OnInit {
  testForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.buildForm();
  }

  ngOnInit() {
    this.subscribeToShowTextInput();
    this.subscribeToShowCheckBox();
  }

  buildForm(): void {
    this.testForm = this.formBuilder.group(
      {
        showTextInput: this.formBuilder.control(null),
        showCheckbox: this.formBuilder.control(null),
      }
    )
  }

  // 根据输入框状态切换复选框启用状态
  private subscribeToShowTextInput(): void {
    const showCheckbox = this.testForm.controls['showCheckbox'];
    this.testForm.controls['showTextInput'].valueChanges.subscribe(
      (value) => {
        if (value) {
          showCheckbox.disable({emitEvent: false});
        } else {
          showCheckbox.enable({emitEvent: false});
        }
      }
    );
  }

  // 根据复选框状态切换输入框启用状态
  private subscribeToShowCheckBox(): void {
    const showTextInput = this.testForm.controls['showTextInput'];
    this.testForm.controls['showCheckbox'].valueChanges.subscribe(
      (value) => {
        if (value) {
          showTextInput.setValue('', {emitEvent: false});
          showTextInput.disable({emitEvent: false});
        } else {
          showTextInput.enable({emitEvent: false});
        }
      }
    );
  }
}

如果业务逻辑需要在控件状态变化后执行额外操作，可在状态修改完成后单独触发自定义事件，不要依赖valueChanges的自动触发。

内容的提问来源于stack exchange，提问作者Ahmed Samy