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)]，但还是没有运气。

感谢您的帮助。

谢谢，罗希特（Rohit）

Answer 1

不获取最新值的原因是角度绑定的工作方式。 var storage = multer.diskStorage({ destination: function (request, file, callback) { //tag and path are 2 function to set the name and path directory //tag example = ['IV190', '207401_SITRASB', '7738_IV19001G10101'] var tag = file.originalname.split('-'); //path example = "C:/progetti/sios4_nodejs/SIOS4_siosnew/Documentale/ //Commesse/207401_SITRASB/Opere/IV190/foto" var path = "C:/my_projects/test/images" ; return callback(null, path); }, filename: function (request, file, callback) { //Example filename: 7738_IV19001G111.jpg var tag = file.originalname.substr(file.originalname.lastIndexOf('-') + 1); return callback(null, tag) } }); var upload = multer({storage: storage}); app.post('/upload', upload.array('files'), function (req, res) { console.log("done"); res.json({status: 'ok', message: 'Pictures uploaded'}); });元素绑定到input变量，但是在angular没有机会更新到实际DOM节点的绑定之前，必须提交表单。解决此问题的一种方法是，在下一个事件循环周期中延迟stringToSend发布（例如，使用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); }控件时，请参考docs。

Angular 7-ngForm，ngSubmit-提交旧值

1 个答案: