在 Angular4 中提交隐藏表单

Question

为了克服我在提交常规 HTTP 请求时遇到的 CORS（跨源请求共享）问题，我需要在 Angular 中提交隐藏表单 4。我在 HTML 中做到了没问题。但是，我不确定如何在 Angular 中做到这一点。这是我在组件 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文件中，我已经实现了函数"submit"。如果将其留空，则不会提交表单。在这个函数中写的命令是什么，只是为了提交具有指定操作的表单？

 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>

这将使 angular 忽略该表单，因此它将是一个普通的 HTML 表单。该按钮将触发其提交。

要以编程方式提交表单，请在组件上获取表单。下面的form指的是上面的#form。 nativeElement指的是HTMLFormElement.

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

然后在需要时调用 submitForm()。

在 Angular4 中提交隐藏表单

Submitting a hidden form in Angular4

forms

hidden

http

same-origin-policy

angular