Question

在我的angular 5应用程序中，我需要在Http GET调用之后以编程方式提交隐藏表单，但是当提交表单时，我发送的三个变量似乎是空的（但它们没有）。

在我的组件中，我有：

@ViewChild('testForm') testFormEl: any;


this.ticketService.postTicketWithCreditPayment(param)
    .subscribe(res => {
        this.paymentUrl = res.url;
        this.paymentXml = res.xml;
        this.paymentHash = res.hash;

        console.log(this.paymentUrl) <-- this log make me see the correct paymentUrl 

        this.testFormEl.nativeElement.submit();
     })
    }

在我的html中，我有3个隐藏字段的表单

<form #testForm name="form1" action="https://...url..." method="post">
    <input type="hidden" name="url" [value]="paymentUrl">
    <input type="hidden" name="xml" [(ngModel)]="paymentXml">
    <input type="hidden" name="hash" [(ngModel)]="paymentHash">
</form>

我尝试与[value]和[(ngModel)]绑定，但提交的表单始终如下：

可能与：stackoverflow

有关

Answer 1

尝试将HTML重写为：

<form #testForm name="form1" action="https://...url..." method="post">
  <input type="hidden" name="url" [ngModel]="paymentUrl">
  <input type="hidden" name="xml" [ngModel]="paymentXml">
  <input type="hidden" name="hash" [ngModel]="paymentHash">
</form>

[value]代替[ngModel]也可以在这里工作：从控制器绑定一种方式。

在您的TS文件中

：

// get reference to the form
@ViewChild('testForm') testFormEl;
...

在您的subscribe方法中，使用setTimeout()换页提交，因此提交将移至下一个标记：

setTimeout(_ => this.testFormEl.nativeElement.submit());

现在应该可以了。

我创建了一个stackblitz（https://angular-f7lg76.stackblitz.io），其中我从method元素中删除了action和form属性，因此它会对其执行GET self，您可以在URL地址栏中看到发送的数据。

Stackblitz来源：https://stackblitz.com/edit/angular-f7lg76?file=app%2Fapp.component.ts

以编程方式提交表单的Angular 5不会发送正确的值

1 个答案: