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