選擇后清除角材料自動完成

Question

我遇到的問題如下：我需要的行為是，當從自動完成輸入中選擇一個選項時，它應該向 Angular Material Chips 組件添加一個芯片（它確實如此），並且它還應該清除自動完成輸入，這樣我就可以選擇另一個選項。

這是我的 html：

<div class="col-md-6">
   <md-form-field>
      <input type="text" placeholder="Categoría" aria-label="Categoría" mdInput [mdAutocomplete]="auto" [formControl]="categoryCtrl">
      <md-autocomplete #auto="mdAutocomplete" (optionSelected)="selectCategory($event)">
         <md-option *ngFor="let category of filteredCategories | async" [value]="category.name">
            {{ category.name }}
         </md-option>
      </md-autocomplete>
   </md-form-field>
</div>

這是我的打字稿代碼：

constructor(private placeService: PlaceService, private categoryService: CategoryService) {
    this.categoryCtrl = new FormControl();
    this.filteredCategories = this.categoryCtrl.valueChanges
        .startWith('')
        .map(category => category ? this.filterCategories(category) : this.categories.slice());
}

filterCategories(name: string) {
    return this.categories.filter(category => category.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

selectCategory(category: any) {
    const index = this.selectedCategories.indexOf(category.option.value);
    if (index === -1) {
        this.selectedCategories.push(category.option.value)
    }
}

我已經檢查了 Angular Material 文檔，但我還沒有找到一種方法來做到這一點。

謝謝。

Answer 1

我認為你很接近，看起來唯一缺少的部分是重置selectCategory的表單控件值。 這是我們在自己的應用程序中完成它的方式，但實際上是同一件事：

/** Reference to the autocomplete trigger. */
@ViewChild(MdAutocompleteTrigger)
private trigger: MdAutocompleteTrigger;

/** Form control for the input. */
searchControl = new FormControl('');

ngAfterViewInit() {
  // Clear the input and emit when a selection is made
  this.trigger.autocomplete.optionSelected
    .map(event => event.option)
    .subscribe(option => {
      // This may or may not be needed, depending on your purposes
      option.deselect();

      // Emit the selection (so parent component can add chip)
      this.selection.emit(option.value);

      // Reset the value of the input
      this.searchControl.setValue('');
    });
}

每當您選擇一個值時，所選文本都會有一個簡短的“閃爍”。 為避免這種情況，您可以使用displayWith屬性將選定的值顯示為空：

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull">
  ...
</md-autocomplete>

/** Display function for selected autocomplete values. */
displayNull(value) {
  return null;
}

Answer 2

這是我的方法

在模板中

...
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayNull" (optionSelected)="selectHandler($event)">
...

在 component.ts

public selectHandler(event : MdAutocompleteSelectedEvent) : void
{
    event.option.deselect()
    this.doStuffWith(event.option.value)
}

public displayNull()
{
    return null
}

Answer 3

遇到了這個解決方案，但我不喜歡displayNull修復。

我的解決方案看起來類似於：

組件.html：

  <input matInput [matAutocomplete]="auto" (input)="filter($event.target.value)" #autoInput>
  <mat-autocomplete #auto [displayWith]="displayKey" (optionSelected)="emit($event, autoInput)">
  // ...
  </mat-autocomplete>

組件.ts：

@Output() optionSelected = new EventEmitter<MatAutocompleteSelectedEvent>();

emit(event: MatAutocompleteSelectedEvent, ele: HTMLInputElement) {
  ele.value = '';
  ele.blur();
  this.filter('');
  this.optionSelected.emit(event);
}

Answer 4

如果您使用反應式表單，最簡單的方法是獲取控件並將值設置為空字符串

• 獲取控制權： https : //angular.io/api/forms/AbstractControl#get
• 設置值： https : //angular.io/api/forms/AbstractControl#setvalue

就我而言，我必須這樣做：

<input [matAutocomplete]="auto" formControlName="currentContact" type="text" matInput placeholder="Locatie">

this.reactiveForm = this.formBuilder.group({currentContact: ['']})
this.reactiveForm.get('currentContact').setValue('');