在 Angular4 中提交隐藏表单

Posted 2023-02-27

【中文标题】在 Angular4 中提交隐藏表单

【英文标题】：Submitting a hidden form in Angular4

【发布时间】：2018-05-15 15:27:06

【问题描述】：

为了克服提交常规 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 文件中，我实现了“提交”功能。如果将其留空，则不会提交表单。在这个函数里面写什么命令只是为了提交带有指定动作的表单？

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

有什么线索吗？

【问题讨论】：

用<form ngNoForm" ...代替<form form #f="ngForm" ...>，它应该不需要调用f.submit()

@***.com/users/592792/andré-werlang 您能否将您的评论作为答案并使其更清楚，因为我不太明白您的意思。我对 Angular 4 真的很陌生。

【参考方案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()。

【讨论】：

谢谢安德烈，这解决了我的问题。你救了我的一天！现在，还有一点点，有没有可能，所以提交表单而不点击提交。我希望一切都隐藏在后台。

HTTP请求执行成功并返回响应后。我需要阅读响应并进行一些处理。你有关于如何做到这一点的有用链接或给我一些有用的提示吗？

这不能通过表单来完成。这是因为当一个表单被提交时，上下文被销毁并且一个新的被加载。即使表单完成提交时有回调，也没有时间做任何事情。提交事件发生在表单实际发布之前。所以我想说看看JSONP。您将发出一个 get 请求，该请求将返回一个 javascript 有效负载，该有效负载将按您指定的名称调用一个函数。当然后端需要支持。

如何接收提交给“whatever.site.I_access”的组件表单数据，考虑到whatever.site是有角度的？

@mayank 看来您需要执行 Ajax/http 请求。 SO 上已经有很多关于这方面的信息了。