Angular动态响应式表单问题：Checkbox未触发valueChanges

问题根源分析 #

1. 复选框绑定错误：模板中mat-checkbox误用了[formGroupName]（用于嵌套表单组），实际需要绑定单个表单控件，应使用[formControlName]。
2. 表单数组逻辑错误：onfilterSelect方法错误地向filters数组新增FormGroup，而非修改当前索引对应的表单组，导致表单结构混乱，无法追踪值变化。
3. 方法名不匹配：模板绑定的onAddFilter()与组件定义的onAddfilter()大小写不一致，导致添加按钮可能失效。
4. 初始表单结构冗余：新增筛选器时初始化了包含多类型控件的FormGroup，与动态添加控件的逻辑冲突，干扰值变化追踪。

修复后的代码实现 #

模板代码

<form [formGroup]="filterFormGroup">
  <div formArrayName="filter">
    @if (filterArray.length) {
      @for (filterItem of filters.controls; track filterItem; let i = $index) {
        <div class="filter-card" [formGroupName]="i">
          @if (filterArray[i]) {
            @switch (filterArray[i].filterSelect) {
              @default {
                <div class="array-select">
                  <mat-form-field class="query-filter-input" floatLabel="never">
                    <mat-select
                      placeholder="Select Function"
                      (selectionChange)="onFilterSelect($event, i)"
                      data-cy="query-form-function-select"
                    >
                      @for (filter of filterList; track filter) {
                        <mat-option
                          [value]="{ type: filter.type, value: filter.value }"
                        >
                          <div>
                            {{ filter.title }}
                          </div>
                        </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                </div>
              }
              @case (10) {
                <mat-checkbox
                  [formControlName]="filterArray[i].filterValue"
                  class="example-margin"
                >Check me!</mat-checkbox>
              }
            }
          }
        </div>
      }
    }

    <div class="button-container">
      <kx-ui-button
        variant="secondary"
        ariaLabel="Add Filter"
        (click)="onAddFilter()"
        dataCy="query-form-add-filter"
        leadingIcon="add"
      >Add Filter</kx-ui-button>
    </div>
  </div>
</form>

组件代码

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, UntypedFormArray, MatSelectChange } from '@angular/forms';

@Component({
  selector: 'app-filter-form',
  templateUrl: './filter-form.component.html',
  styleUrls: ['./filter-form.component.scss']
})
export class FilterFormComponent implements OnInit {
  @Output() filterModel = new EventEmitter<any>();
  @Output() statusChange = new EventEmitter<string>();

  @Input()
  set filterModelForm(filterModel: any) {
    console.log(filterModel);
  }
  @Input() filterList: filters[] = [
    { title: 'Boolean Filter', type: 10, value: 'booleanFilter' },
    { title: 'String filter 1', type: 4, value: 'stringFilter1' },
  ];

  filterArray: filterArray[] = [];
  filterFormGroup = new FormGroup({
    filter: new UntypedFormArray([]),
  });

  get filters(): UntypedFormArray {
    return this.filterFormGroup.controls['filter'] as UntypedFormArray;
  }

  constructor(private formBuilder: FormBuilder) { }

  onFilterSelect(event: MatSelectChange, index: number): void {
    const selectedType = event.value.type;
    const selectedControlName = event.value.value;

    // 获取当前索引对应的表单组
    const currentGroup = this.filters.at(index) as FormGroup;
    // 清除原有冗余控件
    Object.keys(currentGroup.controls).forEach(key => currentGroup.removeControl(key));
    
    // 根据选中类型添加对应控件
    switch(selectedType) {
      case 10: // 布尔类型
        currentGroup.addControl(selectedControlName, this.formBuilder.control(false));
        break;
      case 4: // 字符串类型
        currentGroup.addControl(selectedControlName, this.formBuilder.control('', []));
        break;
      // 可扩展数字类型等其他类型
    }

    // 更新filterArray用于模板渲染
    this.filterArray[index].filterSelect = selectedType;
    this.filterArray[index].filterValue = selectedControlName;
  }

  onAddFilter(): void {
    // 新增空表单组，后续动态添加控件
    this.filters.push(this.formBuilder.group({}));
    this.filterArray.push({
      filterSelect: 0,
      filterValue: '',
    });
  }

  ngOnInit() {
    this.filterFormGroup.valueChanges.subscribe((model) => {
      console.log('emit model', model);
      this.filterModel.emit(model);
    });
  }
}

export interface filters {
  title: string;
  type: number;
  value: string;
}

interface filterArray {
  filterSelect: number;
  filterValue: string;
}

关键修复说明 #

1. 复选框绑定修正：将[formGroupName]改为[formControlName]，确保复选框与表单控件正确关联，触发valueChanges事件。
2. 表单组逻辑修正：在onFilterSelect中修改当前索引的表单组，而非新增，保证表单数组与filterArray状态同步。
3. 方法名统一：将组件方法名改为onAddFilter，与模板绑定一致。
4. 简化初始结构：新增筛选器时创建空表单组，根据选择类型动态添加控件，避免冗余控件干扰值变化追踪。

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