javascript - Angular 4/6/7 中等效的表单操作是什么？

Question

我有一个支付网关，我需要将其嵌入到我的 Angular 应用程序中。我必须在我的页面中添加一个表单标签，在收到有效的结帐 ID 后(我必须注入(inject)一些 JS 代码，它向支付服务器发送一个请求，其中包含要收取的金额，它会回复一个有效的结帐 ID)，将显示一张卡片。

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

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

现在我已经在表单中硬编码了操作 URL。我如何使这个动态？根据 Angular 文档，他们不再建议使用表单操作，而是希望我们在代码中这样做。但是，由于我无法控制此表单，因此我需要一些方法来使 URL 动态化。

Answer 1

您可以将 ngNoForm 指令与属性绑定(bind) [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

希望这会有所帮助!