Form is not getting submitted in Angular 8

Question

I am submitting a form from code when my cookie is available. But form is not getting submitted. Please see the code. The same code is working in Angular 7.

A few changes that I have done is @ViewChild new syntax. Please see the code:

HTML

<form id="frmRender" [formGroup]="ssrsFromGroup" #frmRender [action]="ssrsReportUrl" method="post" target="embedFrame" (ngSubmit)="submitForm();">
  <INPUT type="hidden" name="rs:Command" value="Render">
  <INPUT type="hidden" name="rs:Embed" value="true">
  <INPUT type="hidden" name="rc:LinkTarget" value="main">
  <INPUT type="hidden" name="rs:Format" value="HTML4.0">

</form>

<iframe [hidden]="!cookiePresent" title="SSRS" class="ssrs-height" id="embedFrame" name="embedFrame" [src]="ssrsReportUrl" fxFlexFill></iframe>

Component code

    @ViewChild('frmRender', { static: false }) frmRenderEl: ElementRef;
    ssrsFromGroup = new FormGroup({});

Inside ngOnInit() or AfterViewInit()

 ngOnInit() {
    this.params.ssrsReportName = 'PatientsReviewReport';
    this.ssrsUrl = '';

    this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
    this.generateCookie();

  }


private generateCookie() {
    this.service.iFramePathService(this.params).pipe(first()).subscribe((response) => {
      this.ssrsUrl = response.ssrsEmbeddedUrl;
      this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
      console.log('this.frmRenderEl', this.frmRenderEl);
      this.frmRenderEl.nativeElement.submit();
      this.setCookies(response.cookieValue);
      this.cookiePresent = true;
    }, (error) => {
      // this.showError(error.error);
      console.log('There is an error generating cookie for SSRS and showing it.', error);
    });
  }


 public submitForm() {
    console.log('Form is submitting automatically.');
  }

The code where I have mentioned

this.frmRenderEl.nativeElement.submit();

is getting failed and it is not calling submit() method. The same code with older Viewchild in Angular 7 is working fine. Any idea?

Answer 1

If you look at your code here:

<form id="frmRender" [formGroup]="ssrsFromGroup" #frmRender [action]="ssrsReportUrl" method="post" target="embedFrame" (ngSubmit)="submitForm();">

You'll see that (ngSubmit)="submitForm();" . That's what you are looking for. It expects a function named submitForm in your.ts file.

 submitForm() {
    if (this.form.invalid) {
      return;
    }

    // your logic here
  }

Edit:

Question is how can I submit form from my other generateCookie function.

Change it to: (ngSubmit)="generateCookie()"

Edit 2:

Since you want to execute generateCookie on ngOnInit(), you should remove this line from there:

this.frmRenderEl.nativeElement.submit();

submitForm() is supposed to be executed right after you press the submit button in your form. It makes no sense to submit the form once the page loads for the user, I mean literally.

2nd way: In my opinion, it's better to generate the cookie once you submit the form.

submitForm() {
    if (this.form.invalid) {
        return;
    }

    // Generate your cookie
    this.service.iFramePathService(this.params).pipe(first()).subscribe((response) => {
      this.ssrsUrl = response.ssrsEmbeddedUrl;
      this.ssrsReportUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.ssrsUrl);
      this.setCookies(response.cookieValue);
      this.cookiePresent = true;

      // Cookie is generated, so you can process further

    }, (error) => {
      // this.showError(error.error);
      console.log('There is an error generating cookie for SSRS and showing it.', error);
    });
}

Note Cookie is generated comment. That's basically the time when the cookie is generated and after that line you can do the rest of your logic.

Edit 3: Okay, I got it, you want to trigger the form from outside.

@ViewChild('frmRender') frmRender: FormGroupDirective; 

<form (ngSubmit)="submitForm()" id="ngForm" #frmRender="ngForm">
...
</form>

You can trigger the form by doing this:

this.frmRender.ngSubmit.emit();

Answer 2

Hi Aksah you have to make onSubmit method in your ts file

   onSubmit() {
      // write your logic here
   }

Answer 3

(ngSubmit)="submitForm();

this bit of code is for submitting your form, you need a submitForm() function in your.ts file and have the logic inside that function.