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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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