Angular拖拽Filter后FormGroup值在DOM不更新问题排查

开发了一个管理表格筛选的FiltersAccordion组件，支持Filter组件在不同FilterBlock间拖拽。核心问题：拖拽到目标FilterBlock的新Filter组件，FormGroup数据正确，但表单值未在DOM中渲染。即使在Filter组件的ngOnInit中初始化FormGroup或调用patchValue()赋值，控制台打印FormGroup值正确，但DOM仍无变化。

FiltersBlock组件代码 #

HTML模板 #

// filters-block.component.html
<ul
  class="filter__group__list"
  (dragover)="handleDragOver($event)"
  (drop)="handleDrop($event)"
>
  <li
    class="filter__group__item"
    draggable="true"
    *ngFor="let group of filterGroups; let idx = index"
  >
    <app-filter
      (change)="handleUpdateFilter($event, idx)"
      [columnsService]="columnsService"
      [data]="data"
      [defaultValues]="group"
      (dragStart)="handleDragStart($event, idx)"
      (dragEnd)="handleDragEnd($event, idx)"
      (removeFilter)="handleRemoveFilter(idx)"
    ></app-filter>
  </li>
</ul>

TypeScript代码 #

// filters-block.component.ts

// * Filters grouped by AND operator
export class FiltersBlockComponent implements OnInit {
  @Output() dragStart = new EventEmitter<{ event: DragEvent; item: number }>();
  @Output() dragEnd = new EventEmitter<{ event: DragEvent; item: number }>();
  @Output() removeBlock = new EventEmitter<void>();

  public filterGroups: FormGroup<FilterGroupTO>[];

  constructor() {}

  ngOnInit() {
    this.filterGroups = [
      new FormGroup<FilterFormGroupTO>({
        checkBox: new FormControl<boolean | null>(false),
        field: new FormControl<FilterableColumnsTO | null>(null),
        relation: new FormControl<string | null>(''),
        value: new FormControl<FilterableColumnsTO | null>(null),
      }),
    ];
  }

  handleUpdateFilter(filter: FilterFormGroupTO, index: number) {
    this.filterGroups[index].patchValue(filter as any);
  }

  handleRemoveFilter(index: number) {
    this.filterGroups.splice(index, 1);

    if (this.filterGroups.length === 0) {
      this.removeBlock.emit();
    }
  }

  handleDragStart(event: DragEvent, index: number) {
    this.dragStart.emit({ event, item: index });
  }

  handleDragEnd(event: DragEvent, index: number) {
    this.dragEnd.emit({ event, item: index });
  }

  handleDragOver(event: DragEvent) {
    event.preventDefault();
    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
  }

  handleDrop(event: DragEvent) {
    event.preventDefault();
    if (event.dataTransfer) {
      const filterData = event.dataTransfer.getData('filter');
      const properFilter = JSON.parse(filterData);

      const newGroup = new FormGroup<FilterFormGroupTO>({
        checkBox: new FormControl<boolean | null>(properFilter.checkBox),
        field: new FormControl<FilterableColumnsTO | null>(properFilter.field),
        relation: new FormControl<string | null>(properFilter.relation),
        value: new FormControl<FilterableColumnsTO | null>(properFilter.value),
      });
      this.filterGroups.push(newGroup);
    }
  }
}

Filter组件代码 #

HTML模板 #

// filter.component.html
<div
  [formGroup]="filterFormGroup"
  class="filter__group__item"
  [draggable]="enableDrag"
  (dragstart)="handleDragStart($event)"
  (dragend)="handleDragEnd($event)"
>
      <select
        formControlName="field"
      >
        <option
          *ngFor="let option of filtersColumns"
          [displayValue]="option.fieldName"
          [readValue]="option"
          >{{ option.fieldName }}</option
        >
      </select>
      <select
        formControlName="relation"
      >
        <option
          *ngFor="
            let option of filterFormGroup.controls['field'].value?.operations;
            let i = index
          "
          [readValue]="option"
          >{{
            "DIALOGS.FILTERS.RELATION." + option | translate
          }}</option
        >
      </select>
      <select
        formControlName="value"
      >
        <option
          *ngFor="let option of fieldDistincValues; let i = index"
          [displayValue]="option"
          [readValue]="option"
          >{{ option }}</option
        >
      </select>
      <input
        formControlName="value"
        type="text"
      ></input>
    </div>
    <app-toggle
      formControlName="checkBox"
      [label]="'DIALOGS.FILTERS.CHECKBOX' | translate"
    ></app-toggle>
</div>

TypeScript代码 #

// filter.component.ts

export interface FilterFormGroupTO {
  field: FormControl<FilterableColumnsTO | null>;
  relation: FormControl<string | null>;
  value: FormControl<FilterableColumnsTO | null>;
  checkBox: FormControl<boolean | null>;
}

export class FilterComponent implements OnInit {
  @Output() change = new EventEmitter<FilterFormGroupTO>();
  @Output() dragStart = new EventEmitter<DragEvent>();
  @Output() dragEnd = new EventEmitter<DragEvent>();
  @Output() removeFilter = new EventEmitter<void>();
  @Input() defaultValues: FormGroup<FilterFormGroupTO>;

  // filters
  private selectedFilters: FilterTO[] = [];
  public availableFilters: Columns[] = [];

  // form
  public filterFormGroup: FormGroup<FilterFormGroupTO>;

  constructor(private filtersService: FiltersService) {}

  ngOnInit() {
    // Initialize form. NOT WORKING
    this.filterFormGroup = new FormGroup<FilterFormGroupTO>({
      checkBox: new FormControl<boolean | null>(
        this.defaultValues.value.checkBox as boolean | null
      ),
      field: new FormControl<FilterableColumnsTO | null>(
        this.defaultValues.value.field as FilterableColumnsTO | null
      ),
      relation: new FormControl<string | null>(
        this.defaultValues.value.relation as string | null
      ),
      value: new FormControl<FilterableColumnsTO | null>(
        this.defaultValues.value.value as FilterableColumnsTO | null
      ),
    });

    // Patch form values. NOT WORKING
    this.filterFormGroup.patchValues({
      checkBox: this.defaultValues.value.checkBox as boolean | null,
      field: this.defaultValues.value.field as FilterableColumnsTO | null,
      relation: this.defaultValues.value.relation as string | null,
      value: this.defaultValues.value.value as FilterableColumnsTO | null,
    });

    // Get available filters
    this.filtersService().subscribe((res) => {
      this.availableFilters = res;
    });

    // Changes in form listener
    this.filterFormGroup.valueChanges.subscribe((value) => {
      this.change.emit(value as unknown as FilterFormGroupTO);
    });
  }

  handleRemoveFilter() {
    this.removeFilter.emit();
  }

  handleDragStart(event: DragEvent) {
    const fieldValue = this.filterFormGroup.value['field'];
    const checkboxValue = Boolean(this.filterFormGroup.value['checkBox']);
    const relationValue = this.filterFormGroup.value['relation'];
    const valueValue = this.filterFormGroup.value['value'];

    const data = {
      checkBox: checkboxValue,
      field: fieldValue,
      relation: relationValue,
      value: valueValue,
    };

    if (this.enableDrag) {
      event.dataTransfer?.setData('filter', JSON.stringify(data));

      if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
      this.dragStart.emit(event);
    }
  }

  handleDragEnd(event: DragEvent) {
    if (this.enableDrag) {
      this.dragEnd.emit(event);

      if (event.dataTransfer?.dropEffect === 'move') {
        this.handleRemoveFilter();
      }
    }
  }
}

1. 错误创建新的FormGroup，未复用传入的实例 #

Filter组件通过@Input() defaultValues接收了FiltersBlock维护的FormGroup实例，但ngOnInit中又新建了一个独立的filterFormGroup，导致模板绑定的FormGroup和FiltersBlock中更新的实例完全脱节。拖拽后FiltersBlock更新的是filterGroups中的实例，但组件渲染用的是自己新建的，自然无法同步到DOM。

修复：
直接复用传入的defaultValues作为组件的filterFormGroup，无需重新创建：

ngOnInit() {
  // 移除新建FormGroup的代码，直接复用传入的实例
  this.filterFormGroup = this.defaultValues;

  // 省略冗余的patchValue操作，因为defaultValues已经包含正确值
  // ...其他业务逻辑
}

2. patchValues方法拼写错误 #

代码中调用了this.filterFormGroup.patchValues()，但Angular FormGroup的正确方法名是patchValue()（无末尾的s），这会导致赋值失败，控制台会抛出方法不存在的错误。

修复：
若需要手动赋值，将patchValues改为patchValue，但复用defaultValues后此操作可省略。

3. Select选项未正确绑定对象值 #

原生HTML的<select>无法通过自定义属性[displayValue]/[readValue]绑定对象，必须使用Angular的[ngValue]才能正确绑定复杂类型值，否则对象会被序列化为"[object Object]"，导致FormControl的值与选项值不匹配，DOM无法显示选中状态。

修复：
修改Filter组件模板中的select选项绑定：

<!-- field选择器 -->
<select formControlName="field">
  <option *ngFor="let option of availableFilters" [ngValue]="option">
    {{ option.fieldName }}
  </option>
</select>

<!-- relation选择器 -->
<select formControlName="relation">
  <option 
    *ngFor="let option of filterFormGroup.controls['field'].value?.operations"
    [ngValue]="option"
  >
    {{ "DIALOGS.FILTERS.RELATION." + option | translate }}
  </option>
</select>

<!-- value选择器 -->
<select formControlName="value">
  <option *ngFor="let option of fieldDistincValues" [ngValue]="option">
    {{ option }}
  </option>
</select>

4. 模板引用未定义的变量 #

Filter组件模板中使用了filtersColumns，但组件类中仅定义了availableFilters，导致select无选项可渲染，显示为空。

修复：
将模板中的filtersColumns替换为availableFilters：

<option *ngFor="let option of availableFilters" [ngValue]="option">
  {{ option.fieldName }}
</option>

5. 拖拽数据序列化丢失类型信息 #

拖拽时用JSON.stringify()序列化Filter数据，会丢失对象的类型信息（如FilterableColumnsTO的实例属性），导致赋值后FormControl的值是普通对象而非原类型实例，可能影响后续变更检测或业务逻辑。

优化方案：
传递Filter索引而非序列化数据，直接移动原FormGroup实例：

// FiltersBlock组件的handleDragStart
handleDragStart(event: DragEvent, index: number) {
  // 传递当前Filter的索引
  event.dataTransfer?.setData('filterIndex', index.toString());
  this.dragStart.emit({ event, item: index });
}

// 目标FilterBlock的handleDrop（需获取源Block实例）
handleDrop(event: DragEvent, sourceBlock: FiltersBlockComponent) {
  event.preventDefault();
  const filterIndex = parseInt(event.dataTransfer?.getData('filterIndex') || '-1');
  if (filterIndex !== -1 && sourceBlock !== this) {
    // 从源Block移除FormGroup，添加到当前Block
    const movedGroup = sourceBlock.filterGroups.splice(filterIndex, 1)[0];
    this.filterGroups.push(movedGroup);
  }
}

这种方式直接复用原FormGroup实例，完全避免序列化带来的问题。

内容的提问来源于stack exchange，提问作者Helena Sánchez