Angular2 - Validate and submit form from outside

Question

I have a simple form that looks like this

<form (ngSubmit)="save()" #documentEditForm="ngForm"> ... </form> 

and need to submit the the form and check its validity from outside

eg. Either submit it programatically, or with a <button type="submit"> that is outside the <form> tags.

Answer 1

You can link the button to the form using the form attribute on the button:

<form (ngSubmit)="save()" id="ngForm" #documentEditForm="ngForm">    ...  </form>  <button form="ngForm">   SAVE </button> 

You can still check its validity like this:

<button form="ngForm" [disabled]="!documentEditForm.form.valid">   SAVE </button> 

The form needs to have an ID id="example-form" and the submit button a matching ID in the form="example-form"

See here for more details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form

Answer 2

Found out how to do it:

• trigger submit with <formname>.ngSubmit.emit()
• get form status with <formname>.form.valid

Example:

<form (ngSubmit)="save()" #documentEditForm="ngForm"> ... </form>  <button class="btn-save button primary" (click)="documentEditForm.ngSubmit.emit()" [disabled]="!documentEditForm.form.valid">SAVE</button> 

Edit: As @yuriy-yakovenko has pointed out, you should add in your component code the following:

@ViewChild('documentEditForm') documentEditForm: FormGroupDirective;  

And don't forget to import the FormGroupDirective if you haven't done yet