时间戳

首页 > 解决方案 > 以角度在表单外调用表单的提交按钮

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>

标签： angularmat-dialog

解决方案

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

推荐阅读