Angular 4 ngSubmit 未从 jquery 填充的输入中获取值

Question

我使用 jquery 以编程方式填充表单输入字段值。这些值在表单中可见。当我 console.log 提交表单数据时，该数据不包含值。当我手动修改值时，数据确实包含值：

我运行一个填充输入字段的函数：

 $('#itemNum').val('myNewValue');

像这样填充输入：

<input type="text" [(ngModel)]="item.number" name="number" id="itemNumber" class="form-control">

我可以在输入字段中看到这个新填充的值。如果我编辑该输入，我可以获得提交时的值。但是如果我保持原样，它只会 return 组件定义的属性：

export class MyComponent implements OnInit {
  item: Item = {
    number:0,
    ...
  }
  onSubmit(value){ console.log(value) }
}

如何让 ngForm/ngModel/ngSubmit 看到这些 jquery 填充值？

仅供参考，我的表格如下所示：

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" [(ngModel)]="item.number" name="number" id="itemNumber" class="form-control">
...
<input type="submit" class="btn btn-primary" value="Confirm">
</form>

Answer 1

Angular 和 jQuery 是不同的东西，Angular 无法知道 jQuery 所做的更改，你不应该使用它，因为那是什么您正在使用 Angular。

如果您需要以编程方式更改值，则只需：

this.item.number = 10;

如果你使用的是 Reactive Forms，那么你会这样做：

this.form.get('item.number').setValue(10);

Angular 4 ngSubmit 未从 jquery 填充的输入中获取值

Angular 4 ngSubmit not getting values from jquery populated inputs

jquery

angular

ng-submit

ngmodel