How to pass context: saveForm when using cdkMenu

20 views Asked by At

I'm using cdkMenu inside FormGroup. I figured out how to submit the form there, but it doesn't work. As I understand it, this is due to the fact that I need to transmit the context along with the form. like this: <ng-container *ngTemplateOutlet="form; context: {form: saveForm}"></ng-container>

Please help me how to do this. Here is my simplified code.

  <form class="article" [formGroup]="formGroup">
    @for (item of contentFormArray.controls; track item; let i = $index) {
      <!-- Menu -->
      <button class="app-button app-button--icon app-button--no-border"
              [cdkMenuTriggerFor]="menu"
              [cdkMenuTriggerData]="{item}" // i pass formGroup here
      >
        <fa-icon [icon]="faEllipsis"></fa-icon>
      </button>
      <ng-template #menu let-form="item"> // here i get passed formGroup
        <ul
          cdkMenu
          class="app-dropdown menu-dropdown"
          [formGroup]="form" // and this is not working
        >
          @for (option of toolsMenu[form.getRawValue().type]; track option) {
            <li cdkMenuItem class="app-dropdown__item menu-dropdown__item">
              <label>
                <input type="radio"
                       formControlName="option"
                       [checked]="form.getRawValue().option === option.value"
                       [value]="option.value">
                <span>{{ option.label }}</span>
              </label>
            </li>
          }
        </ul>
      </ng-template>
    }
  </form>

I looked for CDK in the source code, but found nothing.

0

There are 0 answers