Javascript 手动为输入赋值不会影响提交后的“ngForm.value”

我正在使用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将被更改

示例代码：

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

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

因此，如果您希望通过编程方式更改表单中任何元素的值，则应使用ReactiveForms API函数进行更改。否则，DOM中的更改将不会反映到基础FormControl，除非用户与DOM进行显式交互

基本上，若您想以编程方式更改任何表单元素的值，您应该在基础FormControl上执行此操作，而不是在DOM上。因此，按如下方式更改showPartPicker的签名应该可以做到这一点

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

---

你能在这张照片上至少复制一次吗stackblitz@SachinGupta这是一个示例：它工作得很好，但我在模板中的VS代码中总是有这样一个错误：未定义标识符“warehouse\u part\u Code”__类型“”不包含这样的成员我如何修复此问题？

showPartPicker(formCtrl: AbstractControl) {
    const modalPartPicker = this.modalService.open(WarehousePartPickerComponent);
    modalPartPicker.componentInstance.emmiter
    .subscribe((selectedCode:WarehousePartGet) => {

        formCtrl.setValue(selectedCode.code);

    });
}