为何绑定matAutocomplete的textarea不显示formControl真实值？

原因 #

Angular Material的matAutocomplete组件原生仅支持<input>元素，与<textarea>搭配使用时存在兼容性缺陷：当通过setValue更新表单控件值后，matInput指令无法正确同步值到textarea的DOM视图，导致表单值已更新但视觉上不显示。

解决方案 #

提供几种可行的解决方式：

• 手动触发变更检测
  注入ChangeDetectorRef，在设置值后强制触发视图更新：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 更新值的逻辑
  updateTextValue() {
    this.sendMessageForm.get('text').setValue('Hi');
    this.cdr.detectChanges();
  }
  

• 改用input模拟textarea
  由于matAutocomplete对<input>的支持更完善，可以用<input>配合CSS样式模拟textarea的外观，避免兼容性问题：

  <input
    matInput
    class="send-message-input"
    [disabled]="isTypingNotAvailable"
    placeholder="Type text ..."
    formControlName="text"
    (keydown.control.enter)="onCtrlEnter()"
    (keydown.enter)="onEnter($event)"
    [matAutocomplete]="auto"
  >
  

  对应的CSS：

  .send-message-input {
    resize: vertical;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  

• 手动同步DOM值
  在更新表单值后，直接操作DOM元素设置textarea的value：

  updateTextValue() {
    const value = 'Hi';
    const textCtrl = this.sendMessageForm.get('text');
    if (textCtrl) {
      textCtrl.setValue(value);
      const textAreaEl = document.querySelector('.send-message-input') as HTMLTextAreaElement;
      if (textAreaEl) {
        textAreaEl.value = value;
      }
    }
  }
  

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