Angular FormArray问题：移除选中项后数组残留undefined值

问题根源 #

你当前的实现误用了FormArray存储多选选中值，同时手动维护选中状态的逻辑与Angular Material mat-select multiple的原生行为冲突，冗余的setValue操作进一步导致状态不同步，最终出现undefined残留。

正确实现方案 #

mat-select multiple原生支持将选中值绑定到FormControl（值为数组类型），无需手动维护FormArray，直接利用表单双向绑定即可解决问题。

修正后代码 #

.ts 文件

export class LlamadoComponent {
  form: FormGroup;
  tipos: GenericData[] = [];
  lugares: GenericData[] = [];
  fuentes: GenericData[] = [];

  constructor(private fb: FormBuilder, private placeService: CrudService) {
    this.placeService.getTipos().subscribe(
      (tipos: GenericData[]) => { this.tipos = tipos; },
      (error: any) => { console.error('Error al obtener la lista de tipos:', error); }
    );

    this.placeService.getLugares().subscribe(
      (lugares: GenericData[]) => { this.lugares = lugares; },
      (error: any) => { console.error('Error al obtener la lista de lugares:', error); }
    );

    this.placeService.getFuente().subscribe(
      (fuentes: any[]) => { this.fuentes = fuentes; },
      (error: any) => { console.error('Error al obtener la lista de fuentes:', error); }
    );

    // 初始化表单：将financiamiento改为FormControl，初始值为空数组
    this.form = new FormGroup({
      nroLicitacion: new FormControl(''),
      extracto: new FormControl(''),
      nombreLicitacion: new FormControl(''),
      tipoLicitacion: new FormControl(''),
      fecha: new FormControl(''),
      hora: new FormControl(''),
      lugar: new FormControl(''),
      presupuesto: new FormControl(''),
      plazo: new FormControl(''),
      // 替换FormArray为FormControl，存储多选数组
      financiamiento: new FormControl([]),
      operatoria: new FormControl(''),
      porLotes: new FormControl(''),
      gdeba1: new FormControl(''),
      gdeba2: new FormControl(''),
      gdeba3: new FormControl(''),
      gdeba4: new FormControl(''),
      lugarConsulta: new FormControl(''),
      lugarAdquisicion: new FormControl(''),
    });
  }

  // 移除原有的financiamientoArray getter和toggleFinanciamiento函数
}

HTML 文件

<h3 class="panel-title">Financiamiento</h3>
<div class="checkbox-financiamiento">
  <mat-form-field>
    <mat-label>Financiamiento</mat-label>
    <!-- 添加formControlName绑定到financiamiento，移除手动click事件 -->
    <mat-select multiple formControlName="financiamiento">
      <mat-option *ngFor="let fuente of fuentes" [value]="fuente.id">
        {{ fuente.descripcion }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

关键修改说明 #

1. 替换FormArray为FormControl：多选选中值本质是一个数组，FormControl完全可以承载数组类型的值，FormArray用于动态添加/移除表单控件（比如多行输入），不适合存储多选结果。
2. 利用原生绑定：mat-select multiple配合formControlName会自动维护选中值数组，无需手动编写toggle逻辑，彻底避免状态不同步问题。
3. 移除冗余操作：删除原有的toggleFinanciamiento函数和setValue调用，这些操作是导致undefined残留的直接原因。

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