Calling the submit button of the form outside the form in 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>

You don’t need the ngSubmit at all and call the save method from anywhere in the component template. — MikeOne, Aug 22 '21 at 14:55
The validation controls are not working on this button though. — Ahmad, Aug 22 '21 at 15:05

Dorin Baba · Answer 1 · 2021-08-22T17:53:47.847

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>

score 1 · Accepted Answer · answered Aug 22 '21 at 15:05

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

But the idea is to keep the buttons outside the form, inside the mat-dialog-actions tag — configbug, Dec 05 '21 at 04:30
this way (listening to click event manually when button is outside) you loose the submit by enter functionality... in order to keep it better option will be @dorin-baba solution — vorant94, Jan 24 '23 at 08:27

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

2 Answers2