Angular 2 Submit button outside of form

Question

my Submit button is outside of the form and i have no idea how to emit the submit event to the form. I tried the following:

 @ViewChild('myForm') myForm: any; // binding to my form

  clickSubmitButton(): void {
    this.myForm.submit(); 
  }

I get the following error: this.myForm.submit is not a function.

After i press the submit button in the form, it should show the validation messages for my inputs. — SirCheckmatesalot
– SirCheckmatesalot, Commented Sep 9, 2016 at 14:31
Angular2 valdiation messages are shown immediately and not only when the form is submitted. Therefore I still have troubles to understand what you actually try to accomplish. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 9, 2016 at 14:34

yurzui · Accepted Answer · 2017-09-22 20:58:27Z

2

This should work:

@ViewChild('myForm', {read: NgForm} ) myForm: any;

and

clickSubmitButton(): void {
  this.myForm.onSubmit(); 
}

yurzui

215k32 gold badges450 silver badges413 bronze badges

answered Sep 9, 2016 at 14:15

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hmm its not working for me. i get again the following error: this.myForm.onSubmit is not a function

Carlos Ramart · Accepted Answer · 2017-09-27 20:55:16Z

0

You can use ElementRef

@ViewChild('myForm') myForm: ElementRef;

then

this.myForm.nativeElement.submit();

Don't forget import ElementRef

import { ElementRef } from '@angular/core';

answered Sep 27, 2017 at 20:55

Carlos Ramart

131 gold badge1 silver badge4 bronze badges