在 Angular 7 中提交后，手动为输入分配值不会影响“ngForm.value”

Question

我正在使用 Angular，需要在我的组件中使用另一个组件作为模式内的列表选择器来设置输入的值。我是这样做的：showPartPicker(myInput: any) {    const modalPartPicker = this.modalService.open(WarehousePartPickerComponent);    modalPartPicker.componentInstance.emmiter    .subscribe((selectedCode: WarehousePartGet) => {        myInput.value = selectedCode.code; // <---- Here I'm assigning the value        console.log(myInput);    });}这是我模板的一部分：<form #formData="ngForm" (ngSubmit)="formData.valid && submit(formData, cardIndex); this.debug.log(formData)" >    ...    <buttontype="button" (click)="showPartPicker(inputPart)"></button>    <input ngModel #inputPart type="text" name="warehouse_part_code" required />    ...问题：表单中的值更改成功但提交后不影响ngForm.value，它仍然是一个空字符串。但是如果我在表单中输入值，ngForm.value 就会改变。示例代码：https://angular-3csmet.stackblitz.io

Answer 1

当您设置 value 时，myInput.value = selectedCode.code;您正在更改 DOM Input 元素的 value 属性。

但是，如文档中所述ngForm 指令在表单元素上创建并注册一个 FormGroup 实例。通过ngModel与nameinput 元素上的属性一起使用，将创建一个 FormControl 作为 FormGroup 的子项。

因此，如果您想以编程方式更改表单中任何元素的值，则应使用 ReactiveForms API 函数来完成。否则，除非用户与 DOM 进行显式交互，否则 DOM 中的更改将不会反映到底层 FormControl。

基本上，如果您想以编程方式更改任何表单元素的值，您应该在底层 FormControl 上执行此操作，而不是在 DOM 上。所以改变showPartPicker如下的签名应该可以解决问题；

<button type="button" (click)="showPartPicker(formData.controls.warehouse_part_code)">

</button>

和

showPartPicker(formCtrl: AbstractControl) {

    const modalPartPicker = this.modalService.open(WarehousePartPickerComponent);

    modalPartPicker.componentInstance.emmiter

    .subscribe((selectedCode:WarehousePartGet) => {

        formCtrl.setValue(selectedCode.code);

    });

}