单击清除角材料自动完成

Question

嗨，我想在单击时重置角度材料自动完成的值，但我不知道该怎么做。

我的代码：

  <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";
}

你能帮助我吗 ？

Answer 1

您可以使用双向数据绑定将输入值绑定到类的属性，并用于resetValue对该属性进行操作。

<input [(ngModel)]="selectedOption" ...

resetValue() {
  this.selectedOption = '';
}

请参阅此处的工作示例

Answer 2

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

nameForm.get('selectedOption')

然后你可以简单地调用 Reactive Forms 提供的 setValue 方法来设置该控件的值。

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