angular - 在表单外以 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

为您的表单分配一个 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>