在angular的表单外调用表单的提交按钮

Question

我在 angular 中有一个表格，我用它来添加和编辑记录。我想要表单外的这个提交按钮。

我正在使用 mat 对话框并希望 mat-dialog 操作标记中的提交按钮。我放置在对话框操作部分的提交按钮没有使表单提交。

<h2 mat-dialog-title>
  <h1 class="pb-4" style="padding-left: 50px">
    <span *ngIf="!userId">Add new</span><span *ngIf="userId">Update</span> user
  </h1>
</h2>

<mat-dialog-content class="mat-typography">
  <div class="dialog-padding">
    <ng-container *ngIf="isLoading$ | async">
      <div class="overlay-layer bg-transparent">
        <div class="spinner spinner-lg spinner-success"></div>
      </div>
    </ng-container>
    <div>
      <form
        #myform="ngForm"
        class="form"
        id="kt_form"
        (ngSubmit)="save(myform)"
      >
        <div class="panel panel-primary">
          <div class="panel-body">
            <div class="row">
              <div class="col-xl-12">
                <div class="form-group">
                  <label class="control-label" for="name">Name</label>
                  <input
                    required
                    type="text"
                    [(ngModel)]="model.name"
                    class="form-control form-control-solid"
                    placeholder=""
                    name="name"
                    #name="ngModel"
                  /> 
                </div>
              </div>
            </div>

            <div class="row pt-4" style="border-top: 1px solid #f5f5f5">
              <div class="col-xl-6"></div>
              <div class="col-xl-6">
                <div class="form-group">
                  <button class="btn btn-primary width-100">
                    {{ neworUpdate }} user
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button
    mat-button
    [mat-dialog-close]="true"
    cdkFocusInitial
    class="btn btn-primary btn-pointer"
  >
    Install
  </button>

  <button mat-button mat-dialog-close class="btn btn-primary btn-pointer">
    Cancel
  </button>
</mat-dialog-actions>

Answer 1

如果你想为你的表单使用提交按钮，你应该在标签之间添加你的按钮，例如（来自文档）：

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
<div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

<button class="button" type="submit">Purchase</button>

</form>

Actually I am using the mat dialog and want the submit button in the mat-dialog actions tag.

在文档中（https://angular.io/start/start-forms）它说：

On the form tag, use an ngSubmit event binding to listen for the form submission

因为你在表单标签之外，你应该像这样修改你的按钮：

<button
mat-button
[mat-dialog-close]="true"
cdkFocusInitial
class="btn btn-primary btn-pointer"
(click)="save()"
>
Install
</button>

或者您可以试试这个答案：

Answer 2

为您的表单指定一个 ID，这样您就可以将提交按钮放在您想要的任何位置，方法是将按钮的类型指定为 submit 以及它要寻址的表单。像这样：

<form 
   id="myform" <=====
   #myform="ngForm" 
   class="form" 
   ...>
     ....
</form>

现在，您可以将按钮放在模板的任何位置，不一定在表单标签内：

<button 
  mat-button 
  type="submit" <====
  form="myform" <====
  [mat-dialog-close]="true"
  cdkFocusInitial
  class="btn btn-primary btn-pointer">
     Install
</button>

在angular的表单外调用表单的提交按钮

Calling the submit button of the form outside the form in angular

angular

mat-dialog