在Angular4中提交隐藏形式

Question

要克服我面临的cors（交叉来源请求共享）问题，我面临提交常规HTTP请求，我需要在Angular 4中提交一个隐藏的表格。我在html中做到了这一点，没有问题。但是，我不确定如何在角度上做到这一点。这是我组件的HTML中的代码：

  <form form #f="ngForm" action="https://whatever.site.I_access" method="get">
   <input type="hidden" name="scope" value="openid email">
   <input type="hidden" name="response_type" value="id_token token">
   <input type="hidden" name="client_id" value="myClientId">
   <input type="hidden" name="redirect_uri" value="https://my.redirect.com/">
   <input type="hidden" name="nonce" value="aNonceValue"> 
   <button type="submit" (click)="f.submit()">Submit</button>
 </form>

在我的.ts文件中，我实现了"提交"函数。通过将其排为空，未提交表格。在此函数中写入什么命令是什么只是用指定的操作提交表单？

 onSubmit(){
 console.log("form submitted");
 }

有线索？

Answer 1

只要将表格附加到文档上，它就应该有效：

  <form #form ngNoForm action="https://whatever.site.I_access" method="get">
   <input type="hidden" name="scope" value="openid email">
   <input type="hidden" name="response_type" value="id_token token">
   <input type="hidden" name="client_id" value="myClientId">
   <input type="hidden" name="redirect_uri" value="https://my.redirect.com/">
   <input type="hidden" name="nonce" value="aNonceValue"> 
   <button type="submit">Submit</button>
 </form>

这将使角度忽略形式，因此它将是普通的HTML形式。该按钮将触发其提交。

以编程方式提交表单，以持有表格的组件。下面的form指的是上面的#form。nativeElement指HTMLFormElement。

 import { ..., ElementRef } from '@angular/core';
 ...
 @ViewChild('form') form: ElementRef;
 ...
 submitForm() {
   this.form.nativeElement.submit();
 }

然后在需要时致电submitForm()。