在表单外以角度调用表单的提交按钮

Question

我有一个角度表单，我用它来添加和编辑记录。我希望这个提交按钮位于表单之外。

我正在使用 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

，这样您就可以通过将按钮的

type

指定为

submit

及其要处理的表单，将提交按钮放置在您想要的任何位置。像这样的东西：

<form 
   id="myForm" // <- assign an id
   #myform="ngForm" 
   class="form" 
   ...>
     ....
</form>

现在，您可以将按钮放置在模板上的任何位置，不一定位于

form

标签内：

<button 
  mat-button 
  type="submit" // <- specify button as submit type
  form="myForm" // <- reference the assigned id
  [mat-dialog-close]="true"
  cdkFocusInitial
  class="btn btn-primary btn-pointer">
    Install
</button>

Answer 2

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

<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>

实际上我正在使用 mat 对话框，并希望在 mat-dialog 操作标签中使用提交按钮。

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

在表单标签上，使用 ngSubmit 事件绑定来监听表单提交

由于您不在表单标签之外，因此您应该像这样修改按钮：

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

或者您可以尝试这个答案：Angular2 - 从外部验证并提交表单