上单击清除角材质自动完成

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 = '';
}

见working example here

Answer 2

首先，你需要得到一个处理你要设置其值，你可以做到这一点使用FormGroup的get方法控制

nameForm.get('selectedOption')

然后，你可以简单地调用由活性形式提供，以设置控件的值setValue方法。

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

Answer 3

你的语法看起来不正确的。尝试this.nameForm.controls['selectedOption'].setValue('test');

Answer 4

什么工作对我来说是增加了当地的参考输入端的控制和使用，以将值设置为空的选项被点击：

input
    #matInput
    type="text"
    placeholder="Search"
    aria-label="Search"
    matInput
    [formControl]="search"
    [matAutocomplete]="auto">
  <mat-autocomplete
    #auto="matAutocomplete"
    (optionSelected)="onOptionSelected($event)"
    panelWidth="auto">
    <mat-option *ngFor="let item of items | async"
      [value]="item.Key"
      (click)="matInput.value=''">
      {{ item.Name }}
    </mat-option>
  </mat-autocomplete>