angularmat-dialog

Calling the submit button of the form outside the form in angular


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>

Solution

  • 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" // <- assign an id
       #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" // <- specify button as submit type
      form="myForm" // <- reference the assigned id
      [mat-dialog-close]="true"
      cdkFocusInitial
      class="btn btn-primary btn-pointer">
        Install
    </button>