Question

我复制了Angular 6 Material自动完成简单示例： Simple Autocomplete

我试图找出一旦选择后如何移除焦点。

我添加了以下更改：

在HTML中

<mat-autocomplete #autoGroup="matAutocomplete" (optionSelected)="onSelectionChanged($event)">

在组件中

  onSelectionChanged(event: MatAutocompleteSelectedEvent) {
    console.log(event.option.value);
  }

将值输出到控制台之后我想从输入字段中删除焦点，但不知道如何做到这一点。

Answer 1

mat-focused类的mat-form-field导致焦点在mat-auto-complete上，通过从mat-form-field中删除它将不会聚焦，

in component ：

export class AutocompleteSimpleExample {
  myControl: FormControl = new FormControl();
  public matForm ;
  constructor(){

  }

  ngOnInit(){
    this.matForm =  document.getElementById("matForm") 
  }
  options = [
    'One',
    'Two',
    'Three'
   ];

  test(option){
    console.log(option)
    setTimeout(function(){
      this.matForm.classList.remove('mat-focused' )}, 100);
  }
}

in html ：

<form class="example-form">
  <mat-form-field class="example-full-width test" #matForm id="matForm">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" #textInput>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="test($event.option)">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

检查此stackblitz。

根据Aeseir的调查结果建立答案

将@ViewChild链接到您的输入。

export class WhateverComponent {
@ViewChild('textInput') textInput: ElementRef;
//all other code
}

onSelectionChanged函数中的

onSelectionChanged(event: MatAutocompleteSelectedEvent) {
    console.log(event.option.value);
    // blur will remove focus on the currently selected element
    this.matInputMain.nativeElement.blur();
    // if you using form you can wipe the input too
    this.yourForm.reset();        
  }

以上内容会将所选值记录到控制台，模糊焦点并重置表单（如果您使用表单并希望使用此功能）。

Answer 2

尝试一下模板

<input #autoCompleteInput type="text" [matAutocomplete]="auto"/>

组件

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger }) autoComplete: MatAutocompleteTrigger;

  close() {
    this.autoComplete.closePanel();
  }

Plunker

Answer 3

要消除对自动完成父输入（如果它是mat-input）的关注，更好的解决方案是使用@ViewChild作为MatInput对其进行引用。 MatInput有一个公共字段focused，可以将其设置为false：

@ViewChild('searchInput', { static: false }) private searchInput: MatInput;
// some time later...
this.searchInput.focused = false

Answer 4

我的自动完成字段使用此打字稿功能

public removeFocus(field, input){
   field._elementRef.nativeElement.classList.remove('mat-focused');
   input.blur(); 
}

HTML 代码

<form class="example-form">
  <mat-form-field class="example-full-width test" #autocompleteField>
   <input matInput type="text" 
     placeholder="Pick one" 
     aria-label="Number"  
     [formControl]="myControl" 
     [matAutocomplete]="auto" 
     #elementInput
   >
   <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)="removeFocus(autocompleteField, elementInput)">
     <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
     </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

从 mat-form-field 及其输入中移除焦点。

以编程方式删除焦点/模糊（Angular6材质）

4 个答案: