Angular 7-ngForm，ngSubmit-提交旧值

Question

我在Angular 7中使用表单如下

<form #payForm="ngForm" (ngSubmit)="onSubmit(payForm, $event)" method="POST" action="POST URL HERE">
      <input type="hidden" name="requestParameter" [value]="stringToSend" />
      <div class="text-center">
        <input type="submit" class="btn blbtn text-uppercase px-5 py-2 rounded my-3" value="Pay Now">
      </div>
      <div class="text-center">
        <a [routerLink]="['/logout']" class="onerem ltbl-link w-auto d-inline-block">Cancel</a>
      </div>
</form>

每当有一些用户操作（例如不同的计划选择或优惠券选择）时，都会计算出“ stringToSend”。 但是，当他最终单击“立即付款”按钮时，我想从我的角度组件向POST URL提交表单，所以我要使用ngForm并通过(ngSubmit)="onSubmit(payForm, $event)"调用

下面是我的控制器代码

onSubmit(form: any, clkEvent: any): void {

// some database inserts before form submit
stringToSend = newCalculatedValue;   // setting stringToSend to new calculated value

clkEvent.target.submit();   // actual form submit from controller

}

但是，当我提交此表单时， stringToSend的最后一个值是使用表单作为表单数据发送，而不是我在onSubmit()函数中计算的最新表单。

在设置最新值之前，我已经对其进行了控制台，它显示良好，但是正在提交表单的最后一个值，这是我的问题。 我也尝试过[(ngModel)]但还是没有运气。

任何帮助表示赞赏。

谢谢罗希特

Answer 1

不使用最新值的原因是角度绑定的工作方式。 input元素绑定到stringToSend变量，但是在angular有机会更新到实际DOM节点的绑定之前，必须提交表单。 解决此问题的一种方法是在下一个事件循环周期中延迟form发布（例如，使用setTimeout ）。

onSubmit(form: any, clkEvent: any): void {

    // some database inserts before form submit
    stringToSend = newCalculatedValue;   // setting stringToSend to new calculated value
    setTimeout(()=>{
       clkEvent.target.submit();   // actual form submit from controller
    } , 0);
}

但是，以上解决方案将是解决该问题的一种简便方法。 理想情况下，应将表单提交委托给服务。

有关处理form控件的一些最佳做法，请参考文档 。