Angular Mat-Dialog中如何按FormArray选择值控制按钮显隐？

要实现FormArray内按钮根据选中值动态显示隐藏，核心是通过表单控件的值绑定*ngIf指令，具体步骤如下：

1. 为FormArray子项添加布尔型表单控件 #

确保FormArray的每个表单组包含一个用于跟踪选中状态的布尔控件，比如isSelected：

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

// 组件类内表单初始化
myForm = this.fb.group({
  items: this.fb.array([])
});

get myFormArray(): FormArray {
  return this.myForm.get('items') as FormArray;
}

// 添加新项到FormArray
addNewItem() {
  const itemGroup = this.fb.group({
    // 保留你原有的输入控件，比如name
    name: [''],
    // 添加布尔控件，默认false
    isSelected: [false]
  });
  this.myFormArray.push(itemGroup);
}

2. 在模板中绑定控件值控制按钮显示 #

在FormArray的循环模板里，用*ngIf绑定对应布尔控件的值，实现按钮的显示/隐藏：

<form [formGroup]="myForm">
  <div formArrayName="items">
    <!-- 循环遍历FormArray的每个子表单组 -->
    <div *ngFor="let item of myFormArray.controls; let i = index" [formGroupName]="i">
      <!-- 原有输入框 -->
      <input formControlName="name" placeholder="输入内容">
      <!-- 用于切换选中状态的控件，比如mat-checkbox -->
      <mat-checkbox formControlName="isSelected">选中显示按钮</mat-checkbox>
      <!-- 动态显示的按钮 -->
      <button 
        *ngIf="item.get('isSelected').value" 
        mat-raised-button 
        color="primary"
      >
        操作按钮
      </button>
    </div>
  </div>
  <button mat-button (click)="addNewItem()">添加新项</button>
</form>

3. 适配MatDialog返回值的填充逻辑 #

当从MatDialog选中值返回后，要将选中状态（true/false）正确赋值给表单控件，确保按钮状态同步：

openDialog() {
  const dialogRef = this.dialog.open(YourDialogComponent);

  dialogRef.afterClosed().subscribe(selectedData => {
    if (selectedData) {
      // 假设selectedData包含name和isSelected字段
      const newItem = this.fb.group({
        name: selectedData.name,
        isSelected: selectedData.isSelected
      });
      this.myFormArray.push(newItem);
    }
  });
}

关键说明 #

• 必须通过表单控件的值来绑定*ngIf，而不是临时变量，这样表单状态变化时按钮会自动响应
• 如果你的选中值来自MatDialog的选择结果，确保返回的数据包含布尔类型的选中状态字段，并正确映射到表单控件

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