Angular响应式表单中MatSelect绑定失效问题求助

1. 移除响应式表单与ngModel的混用 #

你的mat-select同时绑定了formControlName="groups"和[(ngModel)]="reciverToEdit.groups"，这在Angular响应式表单中属于冲突用法，会导致控件状态混乱，直接引发mat-select交互异常。

修改HTML代码，删除[(ngModel)]绑定：

<div class="form-group col">
  <label>Groupes</label>
  <mat-select formControlName="groups" class="form-control" 
              [ngClass]="{ 'is-invalid': submittedE && fE.groups.errors }" multiple>
    <mat-option *ngFor="let group of groups" [value]="group">{{group.groupName}}</mat-option>
  </mat-select>
</div>

2. 确保groups数组被正确赋值 #

当前代码仅声明了groups!:SmGroup[]，但没有加载分组数据的逻辑。如果groups为空数组，mat-select自然没有选项可显示。

在组件初始化时调用服务获取分组数据：

ngOnInit() {
  this.initForms();
  // 示例：通过服务加载分组数据
  this.groupService.fetchAllGroups().subscribe((data: SmGroup[]) => {
    this.groups = data;
  });
}

3. 打开模态框时同步表单控件值 #

打开编辑模态框时，需要将reciverToEdit的属性值同步到editForm对应的控件中，替代原有的ngModel绑定逻辑：

openModalUpdate(template: TemplateRef<any>, reciver: Receiver) {
  this.reciverToEdit = reciver;
  // 使用patchValue批量更新表单，更简洁高效
  this.editForm.patchValue({
    idreceiver: reciver.idreceiver,
    idAddress: reciver.receiverAddress.idAddress,
    firstName: reciver.firstName,
    lastName: reciver.lastName,
    dob: reciver.dob,
    email: reciver.email,
    phone: reciver.phone,
    wilaya: reciver.wilaya,
    commune: reciver.commune,
    codepostal: reciver.codepostal,
    homeNumber: reciver.homeNumber,
    floor: reciver.floor,
    street: reciver.street,
    city: reciver.city,
    groups: reciver.groups, // 同步选中的分组值
    cat: reciver.cat,
    genre: reciver.genre
  });

  this.modalRef = this.modalService.show(template, { class: 'modal-lg' });
}

4. 排查模态框样式冲突 #

如果完成以上步骤后仍无法展开下拉面板，需检查模态框样式是否遮挡了下拉面板：

• 移除模态框容器的overflow: hidden样式（若存在），该样式会截断mat-select的下拉面板。
• 调整下拉面板的层级，确保高于模态框：

::ng-deep .cdk-overlay-container {
  z-index: 10000 !important;
}

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