Angular2 - Validate and submit form from outside
AngularAngular2 FormsAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
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
Solution 2 - Angular
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
Solution 3 - Angular
Important: if using Angular material form controls + reactive forms
Call onSubmit(undefined)
to properly set submitted = true
on the [formGroup]
directive
Note: The directive is not the same object as the angular form itself (more below on that)
Here's part of the sourcecode for the [formGroup]
directive. (for reactive forms)
@Directive({
selector: '[formGroup]',
providers: [formDirectiveProvider],
host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
exportAs: 'ngForm'
})
export class FormGroupDirective extends ControlContainer implements Form,
OnChanges {
/**
* @description
* Reports whether the form submission has been triggered.
*/
public readonly submitted: boolean = false;
.....
onSubmit($event: Event): boolean {
(this as{submitted: boolean}).submitted = true;
syncPendingControls(this.form, this.directives);
this.ngSubmit.emit($event);
return false;
}
You use it like this:
<form [formGroup]="form" #formRef="ngForm">
And you can get a reference to the FormGroupDirective
in your ts
file with:
@ViewChild('formRef')
formRef: FormGroupDirective;
- Note:
NgForm
is another directive automatically applied when you create a<form>
tag. - Confusing note: Both
NgForm
andFormGroupDirective
haveexportAs: 'ngForm'
in their source code, (and they also both declaresubmitted
andngSubmit
properties). But when I put#ngForm='ngForm'
I get an object of typeFormGroupDirective
and notNgForm
(verified in debugger). I'm not sure exactly why - but that's why i declared it asFormGroupDirective
and notNgForm
- I think maybe the first wins.
You use it like this:
this.formRef.onSubmit(undefined)
Example:
// html
<form [formGroup]="form" #formRef="ngForm">
// ...Form Controls
</form>
// component.ts
export class MyComponent {
@ViewChild('formRef')
formRef: FormGroupDirective;
form: FormGroup = new FormGroup({
myInput: new FormControl(''),
//etc...
});
submitFormProgrammatically() {
this.formRef.onSubmit(undefined);
}
}
If you were to just call this.formRef.ngSubmit.emit()
as some other answers have suggested you won't get the all important submitted = true
set.
Why does this matter?
If you're using any Angular CDK or Angular Material controls the error condition isn't displayed unless the form field has been touched (clicked or gained focus) OR the form as a whole has been submitted.
So if you have a missing required field that the mouse/cursor has never entered then that field won't be shown in red even if you do ngSubmit.emit()
(because submitted = false
for the form and the control has touched = false
).
So how does it work normally with a regular submit button?
Normally if you have <button type='submit'>Submit</button>
(inside the <form>
tag) it will trigger the standard HTML <form>
to submit (nothing to do with Angular) - and that raises a standard submit
event on the form tag.
IF that <form>
tag also has a [formGroup]
directive on it (as shown above) then the HTML form submit
event is 'caught' by the directive and that's what causes the onSubmit()
function above to be called.
This in turn raises the ngSubmit
event - which you can catch yourself if you need to do further processing - like showing an alert.
So it's very important to call onSubmit
and not ngSubmit.emit
to get the validation handling to work when using material (reactive form) controls. The $event parameter can just be null or undefined.
Further reading: Look at ErrorStateMatcher
(for Angular CDK/Material only) to see the exact rules. You can create your own if working around the limitations of the default becomes too complex.
Even more confusing: The [formGroup]
directive is NOT the same object as FormGroup
which just holds data. Only the directive has submitted
on it - whereas FormGroup
has things like touched
, pristine
, dirty
.
Solution 4 - Angular
A trick that worked for me using
- Reactive Forms
- Angular2
- incl. IE
was this:
<!-- real button will simulate click on invisible button (cf. form) -->
<button onclick="document.getElementById('hiddenSaveButtonForMicrosoftWithLove').click()">
The Real Button outside forms
</button>
<form>
<!-- will be called in the background and is never visible -->
<button id="hiddenSaveButtonForMicrosoftWithLove" type="submit" style="display: none;">hiddenSaveButtonForMicrosoftWithLove</button>
</form>
Solution 5 - Angular
This example will work in Angular 6 and up
<form (ngSubmit)="save()" id="ngForm" [formGroup]="form">
...
</form>
<button type="submit" class="btn-save button primary" form="ngForm">Save</button>
Solution 6 - Angular
If you are using Reactive Forms use the formGroup invalid property to disable the submit button:
<button
form="ngForm"
[disabled]=" editor.invalid>Enviar</button>
...
<form [formGroup]="editor" id="ngForm" (ngSubmit)="save()" novalidate >
...
</form>
Solution 7 - Angular
This works for me.
<form #editForm="ngForm">
<button type="button" (click)="editForm.submitted = true; editForm.ngSubmit.emit(); anotherMethod();">
Submit programatically
</button>
</form>
The key is to set both submitted = true
and emitting ngSubmit
event.
Solution 8 - Angular
Below solution is working in my case, please try this simple solution. I am not sure, if it will be working into all the conditions:
<form #documentEditForm="ngForm" id="ngForm" (ngSubmit)="save(documentEditForm.valid)">
...Your Input Elements...
</form>
The button should be declared outside the form like this:
<button form="ngForm">Submit</button>
The validation of the form should check into save() by following conditions
save(isValid:boolean){
if(isValid) {
...Your code to save details...
}
}
Hope this simple solution will help you.
Solution 9 - Angular
I'm writing this answer in hopes that it helps someone. I was spending a whole day trying to solve this issue, following every answer and comments therein... but I was still getting the error message that #documentEditForm (my equivalent) was not found (cannot read property x of undefined...), no matter what I tried.
The reason why I thought being 'outside' the form tag was problematic was due to the fact that this problem went away as soon as I placed the submit/validation button inside the </form>
tag. I went down this rabbit hole, but later realized there are legit reasons why I need to be outside of the form.
But later I realized that I had to do TWO things to solve this problem by (1) adding ?
to the ngForm's name when validating and (2) implementing ViewChild(NgForm) documentEditForm!: NgForm
.
<form #documentEditForm="ngForm">
...
</form>
<button class="btn-save button primary" (click)="save()" [disabled]="documentEditForm?.invalid">
SAVE
</button>
Inside component.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
export class XYZComponent implements OnInit {
@ViewChild(NgForm) documentEditForm!: NgForm;
...
When using template-driven forms in Angular, and you use the #form_name="ngForm" syntax, you expose it to just inside the form. However, when you use ViewChild, then you expose the form to the entire component, not just inside the form. Please remember that if the app fails to compile or gives unexpected output/error, give the good old ?
a try.