使用（焦点）清除数据列表在 Angular 中不起作用

Question

我有一个数据列表可以进行选择，效果很好。但是，我希望在用户再次单击输入时清除输入中的文本。现在文本仍然存在，必须手动删除才能看到原始列表。 example

我正在使用Angular12。我正在尝试使用焦点来执行此操作。这是我的 HTML:

 <input type="text" list="clinics" class="form-control" formControlName="preferredClinic" (focus)="clearPreference()" placeholder="Search...">
 <datalist id="clinics">
      <option value="Unsure/No preference"></option>
      <option *ngFor="let clinic of clinicList" [value]="clinic">{{clinic}}</option>
 </datalist>

这是函数：

  clearPreference(){
    this.formValue.value.preferredClinic = "";
    console.log("This has gained focus");
  }

控制台日志记录有效，所以我知道（焦点）正在触发，但它没有清除输入字段。知道我做错了什么吗？

Answer 1

尝试使用这个： this.formValue.controls.preferredClinic.setValue(''); 或

this.formValue.setValue({ preferredClinic: '' });

Answer 2

在您的 Typescript 文件中：

preferredClinic = new FormControl('');

  clearPreference() {
    this.preferredClinic.setValue('');
    console.log('This has gained focus');
  }

在您的 HTML 文件中

<input
  type="text"
  list="clinics"
  class="form-control"
  (focus)="clearPreference()"
  placeholder="Search..."
  [formControl]="preferredClinic"
/>
<datalist id="clinics">
  <option value="Unsure/No preference"></option>
  <option *ngFor="let clinic of clinicList" [value]="clinic">
    {{ clinic }}
  </option>
</datalist>

Stackblitz Example

使用（焦点）清除数据列表在 Angular 中不起作用

Clearing Datalist with (focus) not working in Angular

html

angular

typescript

focus