javascript - 在 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

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

但是，如 docs 中所述ngForm 指令在表单元素上创建并注册一个 FormGroup 实例。通过在输入元素上使用带有 name 属性的 ngModel，FormControl 将被创建为 FormGroup 的子级。

因此，如果您想以编程方式更改表单中任何元素的值，则应使用 ReactiveForms API 函数来完成。否则，除非用户与 DOM 进行显式交互，否则 DOM 中的更改将不会反射(reflect)到底层 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);

    });
}