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

Question

I have a form in angular which I use to add and edit the record. I want this submit button outside the form.

I am using the mat dialog and want the submit button in the mat-dialog actions tag. The submit button that I place in the actions part of the dialog is not making the form to submit.

<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

Assign an Id to your form so you'll be able to put the submit button wherever you want by specifying button's type as submit and the form it is addressing to. Something like this:

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

Now, you can place the button anywhere on the template, not necessarily inside the form tags:

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

Answer 2

If you want to use submit button for your form, you should add your button between tags for example (from docs):

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

In documentation( https://angular.io/start/start-forms ) it says:

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

Since you are outside of form tags, you should modify your button like this:

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

Or you can try this answer: Angular2 - Validate and submit form from outside