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控件的一些最佳做法，請參考文檔 。