Question

我试图弄清楚如何在角度上设置目标。我希望表单的提交在新标签页中进行，所以我有以下内容。

<form id="formLanding" role="form" (ngSubmit)="onSubmit()" #landingForm="ngForm" [target]="'_blank'">
...
</form>

但是，angular不会将其发布到新标签页。我已经阅读了有关noNgForm的信息，但这不适用于我的用例，因为我已经做了大量工作与Angular的表单验证相关联，并且此指令删除了表单引用。有谁知道如何在仍使用Angular表单的同时将表单发布到新标签页？

Answer 1

好吧，这并不漂亮，但这是我无法解决的要求。这是我解决的方法。

创建另一个表单元素，该表单元素将使用get请求在新页面中打开表单（弹出窗口阻止程序无法阻止表单加载，因此可以正常工作）

<form  ngNoForm #htmlForm hidden action="{{window?.location?.href}}" method="get" target="_blank">
  <input name="zip" value="{{formData.zipCode}}"/>
  <input name="autoSubmit" value="true"/>
</form>

这将在新选项卡中打开您当前所在的页面，并将表单值用作查询参数。然后，您可以在组件中获得对表单的引用

@ViewChild("htmlForm")
htmlForm: ElementRef;

在角度管理表单的点击处理程序中，您可以执行所需的任何逻辑加上

this.htmlForm.nativeElement.submit();

然后在组件的初始位置，您可以读取这些表单值并自动提交。

ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      if (params && params.autoSubmit) {

        this.formData.zipCode = params.zip;
        //submit this.formData to the server. 
      }
    });
  }

Angular 6将表单发布到新选项卡

1 个答案: