将表单数据提交到 iframe 的角度方式答案

【问题标题】：Angular way to submit form data to iframe将表单数据提交到 iframe 的角度方式
【发布时间】：2016-06-17 16:49:03
【问题描述】：

我有下面这样的html

<form name="aForm" show="true" action="iframeUrl" target="iFrame" method="post">
  <input id="input_data" type="text" name="input_data" value="data" />
  <input id="input" type="submit" value="post">
</form>

<iframe id="iFrame" name="iFrame" src="iframeUrl" height="500" width="400" border=0>
  <p>Your browser does not support iframes.</p>
</iframe>

我已经有了要在页面加载时提交到 iframe 的数据。我想要做的是让我的角度控制器在页面加载后立即将表单提交到目标 iframe。单击我创建的提交类型输入会给我在 iFrame 中寻找的结果，但我不希望用户必须这样做，甚至不希望用户可以看到表单。我已经看到了很多纯 javascript 解决方案，但它们看起来并不真正符合角度做事的方式。有关最佳实践的任何建议以及如何以角度执行此操作？我是该框架的新手，因此也将不胜感激。

【问题讨论】：

标签： angularjs forms iframe

【解决方案1】：

我不知道这是否是一个理想的解决方案，但我发现这样的方法可行。

window.iframeLoad = function(){
            if (! _this.submitted) {
                document.getElementById('aForm').submit();
            }
            _this.submitted = true;
        };

然后制作 iframe

<iframe id="iFrame" name="iFrame" src="iframeUrl" height="500" width="400" border=0 onload="iframeLoad()">
  <p>Your browser does not support iframes.</p>
</iframe>

我仍然有兴趣了解有关此解决方案的其他想法或更好的想法。

【讨论】：

不，我无法将表单提交的结果返回到 iframe。任何示例代码？对我来说，结果会呈现到新的浏览器选项卡中。

【解决方案2】：

这在 Angular 2 中适用于我

    <form target="frame" action="<Your URL to POST>" #form method="POST" hidden="hidden">
        <input name="token" value={{token}}>
    </form>

并从组件中的 nginint() 调用 nativeElement.submit()。

【讨论】：