单击清除角材料自动完成 [英] 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>

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