Ng-multiselect-dropdown选中值无法重置问题求助

问题根源 #

你的代码中ng-multiselect-dropdown组件未与FormGroup的表单控件绑定，导致对FormControl的setValue/reset操作无法同步到组件视图，这是核心原因。

解决方案步骤 #

1. 给组件添加formControlName绑定

修改HTML中的ng-multiselect-dropdown标签，添加formControlName属性关联到FormGroup对应控件，同时确保父容器已添加[formGroup]="quotationForm"：

<!-- 引擎类型下拉框 -->
<ng-multiselect-dropdown
  [placeholder]="'Select Engine Type'"
  [data]="motor"
  [settings]="dropDownMotorSettings"
  formControlName="boatEngine"
  (onSelect) = "onMotorSelect($event)"
  (onDeSelect)="onMotorDeSelect($event)"
></ng-multiselect-dropdown>

<!-- 配件下拉框 -->
<ng-multiselect-dropdown
  [placeholder]="'Select Boat Accessories'"
  [data]="accessories"
  [settings]="dropDownAccSettings"
  formControlName="boatAccessories"
  (onSelect)="onAccessorySelect($event)"
  (onSelectAll)="onAccessorySelectAll($event)"
  (onDeSelectAll)="onAccessoryDeSelectAll($event)"
  (onDeSelect)="onAccessoryDeSelect($event)"
></ng-multiselect-dropdown>

2. 简化重置函数

无需清空数据源（motor和accessories），只需重置表单控件即可：

clearAll(){
  this.quotationForm.reset({
    // 指定重置后的默认值，与FormControl初始值保持一致
    customerName: '',
    customerEmail: '',
    contactNumber: '',
    boatType: '',
    boatEngine: '',
    boatAccessories: [],
    vat: '',
    discount: '',
    paymentDates: [],
    paymentBoat: [],
    paymentEngine: [],
    deliverySched: '',
  });
  this.selectedBoatType = '';
}

// 单独重置下拉框的函数
clearDropDownContents(){
  this.quotationForm.controls.boatEngine.reset('');
  this.quotationForm.controls.boatAccessories.reset([]);
}

3. 特殊场景处理

如果组件仍未更新，可手动触发变化检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

clearAll(){
  this.quotationForm.reset(/* 默认值 */);
  this.selectedBoatType = '';
  this.cdr.detectChanges(); // 强制触发视图更新
}

无效原因说明 #

之前的操作仅修改了FormControl的值，但组件未与FormControl绑定，选中状态不受FormGroup控制；清空数据源只会让下拉框失去选项，无法清除已选中的视图显示。

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