单击时清除Angular Material自动完成 [英] Clear Angular Material autocomplete on click

问题描述

您好，我想在单击时重置角材料自动完成的值但是我不知道怎么办.

Hi I want reset value of angular material autocomplete on click But I don't know how do.

我的代码:

  <mat-form-field>
        <input type="text" placeholder="Give Rights" formControlName="selectedOption" aria-label="User" matInput  [matAutocomplete]="auto" (input)="onSearchChange($event.target.value)">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let user of users" [value]="user.displayName" (onSelectionChange)="setSelectedUser($event, user)">
                {{ user.displayName }}
            </mat-option>
        </mat-autocomplete>
        <button (click)="resetValue($event)">RESET</button>
    </mat-form-field>

TS:

    this.nameForm = this._formBuilder.group({
    selectedOption: new FormControl()
});    

    resetValue(){
    console.log("Value -> ", this.nameForm.value.selectedOption);
    this.nameForm.value.selectedOption = "test";
}

你能帮我吗?

推荐答案

首先，您需要获取要设置其值的控件的句柄，可以使用FormGroup的get方法来实现此操作

First you need to get a handle to the control whose value you want to set, you can do this using FormGroup's get method

nameForm.get('selectedOption')

然后，您只需调用Reactive Forms提供的setValue方法即可设置该控件.

Then you can simply call the setValue method provided by Reactive Forms to set the value of that control.

<button (click)="nameForm.get('selectedOption').setValue('')">RESET</button>

这篇关于单击时清除Angular Material自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！