Почему кнопки в мат-меню не отправляются?

Question

Я использую mat-menu для отображения списка опций для пользователя.Когда пользователь нажимает на опцию, он должен инициировать отправку моей formGroup.

dropdown.component.html

<form [formGroup]="myForm" (ngSubmit)=onSubmit(myform)>
    <button mat-button [matMenuTriggerFor]="options" type="submit">
        Options
    </button>
    <mat-menu #options="matMenu">
        <button mat-menu-item (click)="test()" type="submit">
                This is an Option //Submit formgroup when this button is clicked
        </button> 
    </mat-menu>
</form>

dropdown.component.ts

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'filter-dropdown',
    templateUrl: './filter-dropdown.component.html'
})

export class FilterDropdown implements OnInit{

    myForm: FormGroup;

    ngOnInit(){
        this.myForm = new FormGroup({});
    }

    onSubmit(form: FormGroup) {
        console.log('submitting...') //Only logs when 'Options' is clicked, not the mat-menu-item
    }

    test(){
        console.log('test has registered') //Logs when mat-menu-item is clicked
    }
}

Когда я нажимаюmat-menu-item, функция test() вызывается, но не onSubmit().Только когда я удаляю элемент из основного меню и оставляю его как отдельную кнопку, он может вызвать функцию отправки.

<form [formGroup]="myForm" (ngSubmit)=onSubmit(myform)>
        <button mat-button type="submit">
            Options
        </button>
        <button (click)="test()" type="submit">
                    This is an Option //Submits now that it is no longer part of a mat-menu
        </button> 
 </form>

Как получить эту кнопку для отправки, когда она также является элементом mat-menu?

Answer 1

Что здесь происходит, так это то, что содержимое компонента mat-menu будет отображаться за пределами вашей формы

Вот несколько опций, которые вы можете использовать, чтобы заставить его работать:

1) Отправьте форму напрямую

<form #form="ngForm" ...>
  ...
  <mat-menu #options="matMenu">
    <button mat-menu-item (click)="form.onSubmit($event)" type="submit">
      ...
    </button> 
  </mat-menu>
</form> 

Обратите внимание, что form.onSubmit() вызов лучше, чем form.ngSubmit.emit(), поскольку он установит отправленный флаг в форме и синхронизирует ожидающие элементы управления https://github.com/angular/angular/blob/4fe0e753659a9230901b7fa0563883d89b219a54/packages/forms/src/directives/reactive_directives/form_group_directive.ts#L224, то есть ваша форма будет вести себя точно так же, если бы эта кнопка отправки была внутри вашей формы

2) Используйте атрибут form в элементе кнопки, чтобы указать форму для отправки ( не работает в IE )

<form id="myForm" ...>
  ...
    <mat-menu #options="matMenu">
        <button mat-menu-item form="myForm" type="submit">
                ...
        </button> 
    </mat-menu>
</form> 

Answer 2

Поскольку раскрывающийся список отображается вне формы, вы не можете отправить форму, поэтому, пожалуйста, передайте ссылку на форму, используя [matMenuTriggerData]="{form: testForm}", а внутри раскрывающегося списка вы можете вызвать отправку формы, используя (click)="form.ngSubmit.emit()", проверьте приведенную ниже ссылку. пример!

Демонстрация стека Blitz