Присвоение значения для ввода вручную не влияет на ngForm.value после отправки в Angular 7

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.

однако, как объяснено в docs директива ngForm создает и регистрирует экземпляр FormGroup в элементе формы. Используя ngModel с атрибутом name для элемента ввода, FormControl создается как дочерний элемент FormGroup.

Следовательно, если вы хотите программно изменить значение любого элемента в форме, это следует сделать с помощью функций API ReactiveForms. В противном случае изменения в DOM не будут отражены в базовом FormControl, если не будет явного взаимодействия пользователя с DOM.

В основном, если вы хотите изменить значение любого элемента формы программно, вы должны сделать это в базовом 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);

    });
}