Angular 7 - ngForm，ngSubmit - 提交旧值答案

【问题标题】：Angular 7 - ngForm, ngSubmit - submitting old valuesAngular 7 - ngForm，ngSubmit - 提交旧值
【发布时间】：2019-09-14 09:05:23
【问题描述】：

我在 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)]，但仍然没有运气。

感谢任何帮助。

谢谢，罗希特

【问题讨论】：

我搜索了 changeDetectorRef 并在构造函数中创建了引用并像 ref.detectChanges() 一样使用，但由于我的问题未解决，我不知道它是如何工作的
你能创建一个stackblitz repo 吗？
代码很长......而且它是保密的，这就是为什么我试图提供我所面临的确切问题......@Pankaj 你之前遇到过这种问题吗？

标签： angular angular7

【解决方案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 控件时的一些最佳实践，请参阅docs。

【讨论】：