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

Answer 3

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 and FormGroupDirective have exportAs: 'ngForm' in their source code, (and they also both declare submitted and ngSubmit properties). But when I put #ngForm='ngForm' I get an object of type FormGroupDirective and not NgForm (verified in debugger). I'm not sure exactly why - but that's why i declared it as FormGroupDirective and not NgForm - 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.emitto 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.

Answer 4

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>

Answer 5

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>

Answer 6

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>

Answer 7

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.

Answer 8

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.

Answer 9

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.