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()。只有当我从Mat菜单中删除该项目并将其保留为独立按钮时，它才能调用Submit函数。

<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

由于下拉列表是在表单外部呈现的，因此您无法提交表单，因此请使用[matMenuTriggerData]="{form: testForm}"传递表单引用，在下拉列表中您可以使用(click)="form.ngSubmit.emit()"触发表单提交，请检查以下参考示例！

Stack Blitz Demo

Answer 2

这里发生的是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>

为何菜单菜单中的按钮不提交？

2 个答案: