Question

我有一个需要嵌入我的角度应用程序中的支付网关。我必须在页面中添加一个表单标签，在其中收到有效的结帐ID（必须注入一些JS代码，该代码会向付款服务器发送一笔要收取的费用的JS代码，然后它会以有效的结帐ID），将显示一张卡片。

根据他们的文档，在用户单击“付款”后，我必须将ACTION表单发送到希望导航的页面。

<form action="https://myurl.com/nextpage/" class="paymentWidgets" 
      data-brands="VISA MASTER">
</form>

现在，我已经在表单中对操作URL进行了硬编码。如何使它动态化？根据角度文档，他们不建议再使用表单操作，而是希望我们在代码中进行操作。但是，由于我对此表单没有任何控制权，因此我需要某种使URL动态化的方法。

Answer 1

您可以将ngNoForm指令与属性绑定[action]="url"结合使用，并可以从组件中更改动态URL。

示例

component.html

  <form ngNoForm  [action]="url" method="POST"
      target="_blank" class="paymentWidgets" data-brands="VISA MASTER">
      <input type="text">
       <button type="submit">Sumbmit</button>
  </form>

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Dynamic Form Action Demo';
  url ="https://myurl.com/nextpage/";
}

Here is Demo on Stackblitz

希望这会有所帮助！

Angular 4/6/7中的等效形式动作是什么？

1 个答案: