CODEWITHSUNDEEP
angulartypescriptangular5angular2-forms
AngularM
AngularM

Reputation: 16618

Angular - Submit a form programmatically

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

Upvotes: 37

Views: 51226

Answers (7)

Quan Truong
Quan Truong

Reputation: 341

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.

Upvotes: 0

dkyc
dkyc

Reputation: 36

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>

Upvotes: 0

faizan baig
faizan baig

Reputation: 1303

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

Upvotes: 20

user2367418
user2367418

Reputation: 306

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

Upvotes: 1

Mojtaba
Mojtaba

Reputation: 3512

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.
}

Upvotes: 14

hayden
hayden

Reputation: 2753

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

Upvotes: 0

WojciechWojciech
WojciechWojciech

Reputation: 31

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

Upvotes: 3

Related Questions