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
– Mohamed Ali RACHID, Commented Jan 3, 2018 at 15:04
It seems like the this.testFormEl.nativeElement.submit() is doing nothing. I cant see the post in the network traffic — AngularM
– AngularM, Commented Jan 3, 2018 at 15:42

giovannipds · Accepted Answer · 2020-12-22 06:15:19Z

20

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();
}

edited Dec 22, 2020 at 6:15

giovannipds

3,5393 gold badges33 silver badges39 bronze badges

answered Apr 23, 2018 at 19:54

faizan baig

1,30315 silver badges21 bronze badges

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

Comments

giovannipds · Accepted Answer · 2020-12-22 00:07:23Z

14

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, 2020 at 0:07

giovannipds

3,5393 gold badges33 silver badges39 bronze badges

answered Mar 26, 2019 at 11:04

Mojtaba

3,6831 gold badge25 silver badges26 bronze badges

1 Comment

Arno 2501 Over a year ago

If you want to really simulate submit you should also emit your values this.testFormElement.ngSubmit.emit(this.testGroup.values);

Rajan · Accepted Answer · 2020-05-05 07:18:31Z

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 5, 2020 at 7:18

Rajan

1,5682 gold badges14 silver badges19 bronze badges

answered May 5, 2020 at 6:03

WojciechWojciech

313 bronze badges

Comments

giovannipds · Accepted Answer · 2020-12-21 22:09:42Z

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, 2020 at 22:09

giovannipds

3,5393 gold badges33 silver badges39 bronze badges

answered Jan 3, 2018 at 13:00

hayden

2,78320 silver badges24 bronze badges

2 Comments

AngularM Over a year ago

I've added the error I get above in my question. Your solution didnt work

Kamlesh Over a year ago

I have tried this code but responding an error that nativeElement is undefined. core.js:14597 ERROR TypeError: Cannot read property 'nativeElement' of undefined

giovannipds · Accepted Answer · 2020-12-22 05:43:35Z

0

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();
}

edited Dec 22, 2020 at 5:43

giovannipds

3,5393 gold badges33 silver badges39 bronze badges

answered Aug 31, 2018 at 16:36

user2367418

3042 silver badges6 bronze badges

Comments

dkyc · Accepted Answer · 2024-09-22 20:24:22Z

0

I found the following method to be the best. I believe this is the intended method of achieving this.

<form #tf (ngSubmit)="saveSomething()" [formGroup]="somethingForm" (keydown.enter)="$event.preventDefault()">
    <input type="text" formControlName="something" (input)="tf.requestSubmit()">
</form>

answered Sep 22, 2024 at 20:24

dkyc

364 bronze badges

Comments

Quan Truong · Accepted Answer · 2024-12-05 06:23:45Z

0

This worked for me :

@ViewChild('testForm') testFormElement : NgForm;

public testMethod(): void {
   this.testFormElement.ngSubmit.emit();
   (this.testFormElement as any).submitted = true;
}

I found it from github.

answered Dec 5, 2024 at 6:23

Quan Truong

3412 gold badges7 silver badges18 bronze badges

Comments

PsiaMac · Accepted Answer · 2025-02-15 11:42:44Z

-1

If u want to make form.submitted = true u need to use event

submitClicked(form: NgForm) {
    form.onSubmit(new Event('submit'));
}

answered Feb 15 at 11:42

PsiaMac

245 bronze badges

Collectives™ on Stack Overflow

Angular - Submit a form programmatically

8 Answers 8

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related