Angular - Submit a form programmatically

Question

Angular - Submit a form programmatically.

I have a form group on the HTML and I want the component to submit the form's action with an email field in a post method. Instead of using a normal submit button.

Below's testMethod gets called from another button. In this method, I want to post the testForm. It has to be posted old school way as it needs an action.

This is my HTML:

<form
  [formGroup]="testGroup"
  [action]='actionLink'
  method='POST'
  #testForm>
   <input name='Email' type='hidden' [value]='currentUserEmail'>
</form>

This is my Component TS file attempt:

  @ViewChild('testForm') testFormElement;

  public currentUserEmail: string = '';
  public testGroup = this.formBuilder.group({
    Email: ''
  });


  public testMethod(): void {

      // Below: This currently doesnt seem to do anything.
      this.testFormElement.ngSubmit.emit();
  }

can you please tell us what is the reason of the error that we see in the console ? and what happened exactly when you click and the button ( when you call `testMethod()` ) ? Thanks — Mohamed Ali RACHID, Jan 03 '18 at 15:04
It seems like the this.testFormEl.nativeElement.submit() is doing nothing. I cant see the post in the network traffic — AngularM, Jan 03 '18 at 15:42
this [solution](https://stackoverflow.com/a/38054632/1730846) worked for me. — Mojtaba, Mar 26 '19 at 10:55

score 19 · Answer 1 · edited Dec 22 '20 at 06:15

You can use ngNoForm with your form to remove ngForm handling and to add plain javascript handler.

you can use your code as follows:

Html file.

<form ngNoForm
  [formGroup]="testGroup"
  [action]='actionLink'
  method='POST'
  #testForm>
    <input name='Email' type='hidden' [value]='currentUserEmail'>
</form>

Ts File.

@ViewChild('testForm') testFormElement;

public currentUserEmail: string = '';
public testGroup = this.formBuilder.group({
  Email: ''
});

constructor(formBuilder: FormBuilder) {
}    

public testMethod(): void {
  this.testFormElement.nativeElement.submit();
}

score 11 · Answer 2 · edited Dec 22 '20 at 00:07

11

I think you should get ngForm in your code. So, rewrite your code as follows:

<form
[formGroup]="testGroup"
[action]='actionLink'
method='POST'
#testForm="ngForm" (ngSubmit)="testForm.form.valid ? yourSaveMethod() :showValidatinErrors()">
  <input name='Email' type='hidden' [value]='currentUserEmail'>
</form>

and in your ts file:

@ViewChild('testForm') testFormElement: NgForm;

public testMethod(): void {
  // Below: This works for me.
  this.testFormElement.ngSubmit.emit();
}

public yourSaveMethod(): void {
  // post your model here.
}

edited Dec 22 '20 at 00:07

giovannipds

2,860
2
31
39

answered Mar 26 '19 at 11:04

Mojtaba

2,764
1
21
24

3

If you want to really simulate submit you should also emit your values `this.testFormElement.ngSubmit.emit(this.testGroup.values);` – Arno 2501 Jan 29 '20 at 13:55

score 3 · Answer 3 · edited May 05 '20 at 07:18

3

I have found a good solution on github

it will setup submitted as true

Out approach now is:

HTML:

 <form [formGroup]="form" #myForm="ngForm" novalidate class="create-form">

ts:

@ViewChild('myForm') ngForm: NgForm;

...
public onSubmit() {
 this.ngForm.onSubmit(undefined); // it will setup submitted as true

edited May 05 '20 at 07:18

Rajan

1,512
2
14
18

answered May 05 '20 at 06:03

WojciechWojciech

31
3

score 1 · Answer 4 · edited Dec 22 '20 at 05:43

Regarding "Angular - Submit a form programmatically" Here is code where a form submits itself. It works for me. Hope this helps.

Component HTML:

<form #myForm ngNoForm name="myForm" [action]="pdfServletUrl" target="_blank" method="POST">
  <button type="submit" [hidden]="'true'"></button>
</form>

Component TypeScript:

@ViewChild('myForm') myForm : ElementRef;

ngAfterViewInit() {
  this.myForm.nativeElement.submit();
}

score 0 · Answer 5 · edited Dec 21 '20 at 22:09

0

import { Component, ViewChild } from '@angular/core';

@Component({
    template: `
        <form #testForm>
            <input name='Email' type='hidden'>
        </form>
    `
})
class MyComponent {
    @ViewChild('testForm') testFormEl;

    testMethod() {
        this.testFormEl.nativeElement.submit()
    }
}

edited Dec 21 '20 at 22:09

giovannipds

2,860
2
31
39

answered Jan 03 '18 at 13:00

hayden

2,643
17
21

I've added the error I get above in my question. Your solution didnt work – AngularM Jan 03 '18 at 14:16
1

I have tried this code but responding an error that nativeElement is undefined. core.js:14597 ERROR TypeError: Cannot read property 'nativeElement' of undefined – Kamlesh Jan 26 '19 at 09:53

Angular - Submit a form programmatically

5 Answers5

Linked