表格未在Angular 8中提交

Question

当我的Cookie可用时，我正在通过代码提交表单。但是表格没有提交。请查看代码。相同的代码在Angular 7中也有效。

我所做的一些更改是@ViewChild新语法。请查看代码：

的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>

组件代码

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

内ngOnInit（）或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.');
  }

我提到的代码

this.frmRenderEl.nativeElement.submit();

失败，并且没有调用Submit（）方法。与Angular 7中较旧的Viewchild相同的代码可以正常工作。任何的想法？

Answer 1

如果您在此处查看代码：

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

你会看到的(ngSubmit)="submitForm();"。这就是您要寻找的。它需要一个submitForm在您的.ts文件中命名的函数。

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

    // your logic here
  }

编辑：

问题是如何从其他generateCookie函数提交表单。

更改为： (ngSubmit)="generateCookie()"

编辑2：

由于要在ngOnInit（）上执行generateCookie，因此应从此处删除此行：

this.frmRenderEl.nativeElement.submit();

按一下表单中的Submit按钮后，submitForm（）应该立即执行。从字面上看，在用户加载页面后提交表单是没有意义的。

第二种方式：我认为，提交表单后最好生成Cookie。

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

注意Cookie is generated注释。基本上就是生成Cookie的时间，在那一行之后，您可以执行其余的逻辑。

编辑3： 好的，我明白了，您想从外部触发表单。

@ViewChild('frmRender') frmRender: FormGroupDirective; 

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

您可以通过执行以下操作触发表单：

this.frmRender.ngSubmit.emit();