Angular 表单的按钮无法按下

Question

我有一个简单的付款表格：

   <form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
       <input  name="data" value="{{data}}" />
       <input  name="signature" value="{{signature}}" />
       <input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
   </form>

问题是我无法按下付款按钮，这根本不起作用

我可以向您保证，该表单正在运行，我已经在 C# 上对此进行了检查，并进行了一些更改：

<div class="container">
    <form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
        <input type="hidden" name="data" value="@ViewData["PaymentData"]" />
        <input type="hidden" name="signature" value="@ViewData["Signature"]" />
        <input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
    </form>
</div>

所有参数都正确通过。看起来 Angular 不让我去链接或类似的东西。请帮忙。

更新

好吧，我改变了这样的形式：

   <form [formGroup]="payForm" (ngSubmit)="LiqPay()" #formDir="ngForm"  novalidate>
      <input formControlName="data" name="data" value="{{data}}" />
      <input formControlName="signature" name="signature" value="{{signature}}" />
      <button type="submit" class="btn btn-default" ng-href="https://www.liqpay.ua/api/3/checkout">go</button>
   </form>

使用 LiqPay 方法：

  LiqPay(){
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');

      this.payForm.value.data = this.data;
      this.payForm.value.signature = this.signature;
      this._http.post('https://www.liqpay.ua/api/3/checkout', 
      this.payForm,{headers}).map((response: Response) => response.json());
}

现在我猜请求已发送，但它没有重定向到所需的链接（https://www.liqpay.ua/api/3/checkout）。那么我如何更改表单以重定向到带有发布数据的此链接？

Answer 1

在 LiqPay 方法中，您尝试将发布请求发送到 https://www.liqpay.ua/api/3/checkout。在按钮中，您有一个 ng-href 属性（尝试浏览器转到该网址）。我认为这是不正确的。您正在发送异步请求，同时将您的用户发送到该网址。

我可以理解，您正在向付款结帐发送表格吗？好的，您可以在表单中使用操作，就像 C# 示例一样。

我已经测试了你的初始代码

<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
       <input  name="data" value="{{data}}" />
       <input  name="signature" value="{{signature}}" />
       <input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>

而且它有效... 您可以在这里查看： https://jsfiddle.net/L1ruajzn/

Answer 2

问题可能在于 Angular 具有内置的安全机制，可以防止将任意 HTML 直接插入到组件模板中。这样做是为了缓解漏洞，例如注入恶意 JavaScript 代码。

当您将 HTML 直接插入 Angular 模板时，Angular 不信任此 HTML 并阻止其执行。

要绕过此问题，您可以使用 Angular 的 DomSanitizer 在 Angular 模板中安全地呈现 HTML 代码。例如，如果您需要将 HTML 代码插入 Angular 模板中，则可以使用 DomSanitizer 将此 HTML 代码标记为安全。

以下是如何在 Angular 中执行此操作的示例：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    const htmlString = `<form novalidate="" method="POST" accept-charset="utf-8" action="https://www.liqpay.ua/api/3/checkout" class="ng-untouched ng-pristine ng-valid">
                          <input type="hidden" name="data" value="...">
                          <input type="hidden" name="signature" value="...">
                          <div class="flex flex-col gap-1 duration-300 overflow-hidden max-h-none max-w-none opacity-100">
                            <span class="text-lg font-medium text-green-950 duration-300">Visit Pay Page</span>
                            <div><button type="submit" class="bg-green-400 font-medium px-7 py-2 flex gap-3 border-2 duration-300 border-green-400 text-white rounded-md hover:bg-green-100 hover:text-green-400 hover:border-green-400"><img src="https://static.liqpay.ua/buttons/logo-small.png" name="btn_text"><span>Pay</span></button></div>
                          </div>
                        </form>`;
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(htmlString);
  }

}

在组件的模板中，使用这个安全的 HTML：

<div [innerHTML]="safeHtml"></div>

请注意，使用DomSanitizer需谨慎，应确保插入的HTML代码安全且不包含恶意元素。