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