已解決430363個問題，去搜搜看，總會有你想問的

在 Angular 7 中提交后，手動為輸入分配值不會影響“ngForm.value”

首頁猿問在 Angular 7...

在 Angular 7 中提交后，手動為輸入分配值不會影響“ngForm.value”

JavaScript

慕森王 2021-06-15 18:19:59

我正在使用 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

查看完整描述

1 回答

ibeautiful

TA貢獻1993條經驗獲得超6個贊

當您設置 value 時，myInput.value = selectedCode.code;您正在更改 DOM Input 元素的 value 屬性。

但是，如文檔中所述ngForm 指令在表單元素上創建并注冊一個 FormGroup 實例。通過ngModel與nameinput 元素上的屬性一起使用，將創建一個 FormControl 作為 FormGroup 的子項。

因此，如果您想以編程方式更改表單中任何元素的值，則應使用 ReactiveForms API 函數來完成。否則，除非用戶與 DOM 進行顯式交互，否則 DOM 中的更改將不會反映到底層 FormControl。

基本上，如果您想以編程方式更改任何表單元素的值，您應該在底層 FormControl 上執行此操作，而不是在 DOM 上。所以改變showPartPicker如下的簽名應該可以解決問題；

</button>

和

showPartPicker(formCtrl: AbstractControl) {

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

modalPartPicker.componentInstance.emmiter

.subscribe((selectedCode:WarehousePartGet) => {

formCtrl.setValue(selectedCode.code);

});

}

反對回復 2021-06-18

1 回答
0 關注
168 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Angular 7 中提交后，手動為輸入分配值不會影響“ngForm.value”

在 Angular 7 中提交后，手動為輸入分配值不會影響“ngForm.value”

1 回答

添加回答

在 Angular 7 中提交后，手動為輸入分配值不會影響“ngForm.value”

在 Angular 7 中提交后，手動為輸入分配值不會影響“ngForm.value”