如何在使用cdkMenu时传递表单上下文saveForm？

算力阿峰

2026-6-27

问题根源

CDK Menu的内容在独立Overlay层渲染，脱离原表单DOM层级；同时原代码中手动设置[checked]会覆盖表单控件状态，导致提交时无法获取正确值。另外需确保通过cdkMenuTriggerData传递的表单控件引用关联正确。

解决方案步骤

明确表单控件的传递命名，避免上下文混淆
移除radio的手动状态绑定，交由表单控件自动管理
确保菜单模板中正确绑定传递过来的表单控件

修改后的代码

<form class="article" [formGroup]="formGroup">
  @for (item of contentFormArray.controls; track item; let i = $index) {
    <!-- 菜单触发按钮 -->
    <button class="app-button app-button--icon app-button--no-border"
            [cdkMenuTriggerFor]="menu"
            [cdkMenuTriggerData]="{control: item}"
    >
      <fa-icon [icon]="faEllipsis"></fa-icon>
    </button>
    
    <ng-template #menu let-control="control">
      <ul
        cdkMenu
        class="app-dropdown menu-dropdown"
        [formGroup]="control"
      >
        @for (option of toolsMenu[control.getRawValue().type]; track option) {
          <li cdkMenuItem class="app-dropdown__item menu-dropdown__item">
            <label>
              <input type="radio"
                     formControlName="option"
                     [value]="option.value">
              <span>{{ option.label }}</span>
            </label>
          </li>
        }
      </ul>
    </ng-template>
  }
</form>

关键说明

数据传递：通过cdkMenuTriggerData="{control: item}"明确传递当前表单控件（item为contentFormArray中的FormGroup实例），模板中用let-control="control"接收，避免变量名歧义。
状态同步：移除[checked]后，formControlName="option"会自动根据控件值同步radio选中状态，避免手动绑定导致的表单状态冲突。
Overlay上下文：CDK Menu的Overlay会继承cdkMenuTriggerData传递的数据，只要control是有效FormGroup实例，[formGroup]="control"就能正常绑定，控件变更会同步到原表单中。