如何通过mat-select的selectionChange事件同步更新关联input输入框的显示值

问题原因 #

Angular响应式表单的FormGroup.value是只读的状态快照，直接修改该对象的属性不会触发表单控件的状态更新逻辑，也不会同步值到视图层，所以你修改this.form.value.tax_id后，控制台打印能看到值变化，但页面输入框不会同步刷新。

另外你原有代码的查找逻辑存在笔误：模板里mat-option绑定的value是category.id，但ts的find方法里判断的是r.category_id==categoryId，字段不匹配可能导致查找不到对应分类。

修复方案 #

修改updateTaxId方法，调用FormGroup提供的patchValue方法更新对应字段值即可：

updateTaxId(categoryId: any){
  // 修正查找字段为id，加空值处理避免报错
  const matchedCategory = this.categories.find(r => r.id == categoryId);
  this.form.patchValue({
    tax_id: matchedCategory ? matchedCategory.tax_id : ''
  });
}

你也可以单独获取tax_id控件调用setValue方法实现同样效果：

this.form.get('tax_id')?.setValue(matchedCategory ? matchedCategory.tax_id : '');

内容的提问来源于stack exchange，提问作者Rafael Segura