Angular 如果我使用 matAutocomplete，为什么 textarea 不显示 formControl 的实际值

发布于09月14日

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

当我调用此代码时:

this.sendMessageForm.get('text').setValue('Hi');

我看到给定的文本是如何放置在表单中的，但在文本区(视觉上)却没有显示，为什么？

看那https://stackblitz.com/edit/angular-ivy-plhchb?file=src/app/app.component.html

推荐答案

问题是mat-autocomplete组件上的displayWith属性阻止了用普通字符串以编程方式设置控件值.

提供的displayFn回调函数阻止使用纯字符串设置表单控件.您可以移除displayWith属性，或者更新displayFn以允许设置纯字符串，或者使用对象{value: 'my string'}而不是字符串来设置控件值.

1. Remove the 100 property from the autocomplete component.

//template

<mat-autocomplete 
    #auto="matAutocomplete" 
    [displayWith]="displayFn" <-- remove
>

2. Update the 100 method to allow your manual changes.

// component.ts

  displayFn(template): string {
    return template && template.value ? template.value : template;
  }

一百零二

通过传递对象来设置控制值，例如，control.setValue({value: 'my string'}).

// component.ts

  initForm() {
    this.sendMessageForm = this.fb.group({
      test: [{value: 'Initial text'}],  <-- need to use object {value: 'string'}
    });
  }

  ...

  addText() {
    this.sendMessageForm?.get('test').setValue({value: 'hi'});
  }