Angular 4嵌套响应式表单：仅在触发父输入旁显示额外输入框

你遇到的核心问题是用了全局状态控制额外输入框的显示，导致所有同类型的FormGroup都会响应这个状态变化。要让额外输入框只在触发它的父输入框旁边出现，关键是给每个FormGroup分配独立的显示状态，让它们各自管理自己的显示逻辑。

下面是具体的解决方案步骤：

1. 给每个FormGroup添加独立的显示状态 #

你可以在创建FormGroup的时候，给每个组添加一个自定义属性（或者用FormControl存储状态，更符合响应式表单规范），用来标记是否需要显示额外输入框。

方式一：使用自定义属性（简单直接） #

在创建表单组的方法里，给每个FormGroup对象添加showOtherInput属性：

createItem(): FormGroup {
  const formGroup = this.fb.group({
    // 这里是你原有的表单控件，比如选项输入框
    option: ['']
  });
  // 初始化显示状态为false
  formGroup['showOtherInput'] = false;
  return formGroup;
}

方式二：使用FormControl存储状态（更符合表单设计规范） #

如果想让状态和表单数据绑定，推荐新增一个boolean类型的FormControl：

createItem(): FormGroup {
  return this.fb.group({
    option: [''],
    showOtherInput: [false] // 用FormControl管理显示状态
  });
}

2. 监听输入/选择事件，更新当前组的状态 #

接下来要监听每个输入框的变化，当用户输入/选择other: 时，更新当前FormGroup的状态。

模板绑定事件（针对方式一） #

在遍历FormArray的模板里，给输入框绑定input事件，调用方法更新当前组的状态：

<div *ngFor="let group of yourFormArray.controls; let i = index" [formGroup]="group">
  <input formControlName="option" 
         (input)="toggleOtherInput(group, $event.target.value)">
  
  <!-- 只在当前组的showOtherInput为true时显示额外输入框 -->
  <input *ngIf="group['showOtherInput']" 
         placeholder="请输入其他内容">
</div>

然后在组件类中实现toggleOtherInput方法：

toggleOtherInput(group: FormGroup, inputValue: string): void {
  // 判断输入值是否匹配目标字符串
  group['showOtherInput'] = inputValue.trim() === 'other: ';
}

使用valueChanges监听（更优雅，支持下拉框等场景） #

如果是下拉框或者需要实时监听值变化，建议用FormControl的valueChanges：

createItem(): FormGroup {
  const formGroup = this.fb.group({
    option: ['']
  });
  formGroup['showOtherInput'] = false;

  // 监听选项控件的值变化
  formGroup.get('option')?.valueChanges.subscribe(value => {
    formGroup['showOtherInput'] = value.trim() === 'other: ';
  });

  return formGroup;
}

如果用方式二的FormControl存储状态，只需把更新逻辑改成设置FormControl的值：

formGroup.get('option')?.valueChanges.subscribe(value => {
  formGroup.get('showOtherInput')?.setValue(value.trim() === 'other: ');
});

模板中的判断也改成：

<input *ngIf="group.get('showOtherInput').value" 
       placeholder="请输入其他内容">

为什么这样能解决问题？ #

之前的问题是所有输入框共用同一个状态变量，所以只要有一个输入触发，所有同组的输入框都会显示额外输入。现在每个FormGroup都有自己独立的showOtherInput状态，只有触发变化的那个组会更新状态，对应的额外输入框才会显示，完全隔离了各个组的逻辑。

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