Angular中Mat-Select选中值同步至Subject输入框失效问题咨询

问题根源 #

我一眼就瞅出问题出在你订阅Supplier值变化的那段代码里！this.form.controls['Subject'] = data;这行完全搞错了逻辑——你是把Subject这个FormControl实例直接替换成了选中的供应商对象，而不是更新输入框的显示值。FormControl的内容更新必须用它提供的专属方法，不能直接给控件本身赋值。

另外，你拿到的data是整个供应商对象（也就是模板里的sp），而Subject输入框需要的是供应商名称（sp.SupplierName），所以还要注意取对具体字段。

修复后的TS代码 #

把订阅部分改成下面这样就行：

this.form.controls["Supplier"].valueChanges
.subscribe(data => {
  // 先判断是否有选中的供应商，避免空值报错
  if (data) {
    // 使用setValue更新Subject控件的值，这里取SupplierName填充输入框
    this.form.controls['Subject'].setValue(data.SupplierName);
    // 如果只需要更新部分值（比如表单嵌套场景），也可以用patchValue，效果一样
    // this.form.controls['Subject'].patchValue(data.SupplierName);
  }
});

额外优化建议 #

• 要是你需要填充的不是单纯的供应商名称，而是更复杂的内容（比如"采购申请 - " + data.SupplierName），直接在setValue里拼接字符串就好。
• 务必保留if(data)的判断，防止用户清空下拉框（如果允许的话）时出现空指针错误。
• 如果你用的是Angular 14及以上版本，也可以用更简洁的写法获取控件：

  this.form.get('Supplier')?.valueChanges.subscribe(data => {
    if (data) {
      this.form.get('Subject')?.setValue(data.SupplierName);
    }
  });
  

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