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();"。这就是您要寻找的。您的.ts文件中需要一个名为submitForm的函数。

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

    // your logic here
  }

编辑：

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

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

编辑2：

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

this.frmRenderEl.nativeElement.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();

Answer 2

您好Aksah，您必须在ts文件中设置onSubmit方法

   onSubmit() {
      // write your logic here
   }

Answer 3

(ngSubmit)="submitForm();

这部分代码用于提交表单，您需要在.ts文件中提供一个commitForm（）函数，并在该函数中包含逻辑。

表格未在Angular 8中提交

3 个答案: