0

我有一个角形表格，用于添加和编辑记录。我希望这个提交按钮在表单之外。

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

2 回答 2

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>
于 2021-08-22T15:15:45.600 回答
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>

实际上我正在使用 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 - Validate and submit form from outside

于 2021-08-22T15:05:27.780 回答