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')

然后，您只需调用Reactive Forms提供的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>

Answer 5

<pre>
//html
<input #inputSearch ........>

<button (click)="btnClick()"  ..........>click</button
//ts
import {ElementRef, ViewChild} from '@angular/core';
 @ViewChild('inputSearch') inputSearch: any;
 constructor(private elementRef: ElementRef,.............)
{
this.inputSearch = elementRef
}
btnClick(){
          this.inputSearch.nativeElement.value=null;
this.inputSearch.nativeElement.dispatchEvent(new Event('input', {
          }))
}

</pre>

点击

5 个答案: