Как настроить автофокус в mat-select?

Вы можете адаптировать этот пример к своему проекту. Щелчок по кнопке становится фокусом.

фокусируясь на элементах формы способом Angular

показать больше

Вы можете вызвать в фокус на OnInit

тс:

 options2 = ['A', 'B'];

  @ViewChild('name')
  nameField: MdSelect;

  ngOnInit() {
    setTimeout(() => {
      this.nameField.open();
    }, 0);
  }

HTML:

<div>
<md-select [(ngModel)] = "nameField" #name>
    <md-option *ngFor = "let option of options2" [value] = "option.id">{{ option }}</md-option>
</md-select>

Обновлено: Извините, я думаю, вы не можете получить родной элемент от mat-select и md-select. Вам нужно получить объект и вызвать open(). Рабочий проект здесь, в стекблиц

Попробуйте использовать MatSelect на viewChild для доступа к сфокусированному атрибуту, затем onInit установите для него значение true.

<mat-form-field>
  <mat-select #mySelect [(ngModel)] = "nameField">
    <mat-option *ngFor = "let option of options2" [value] = "option.id">{{ option.name }} 
    </mat-option>
  </mat-select>
</mat-form-field>

и импорт файла ts import { MatSelect } from '@angular/material';

import { MatSelect } from '@angular/material';

export class SelectExample implements OnInit {
  @ViewChild(MatSelect) mySelect: MatSelect;

  ngOnInit() {
    this.mySelect.focused = true;
  }  
}

Поскольку это первое попадание, которое появляется в Google, я предоставлю то, что нашел:

Обратите внимание, что я сделал это специально для mat-select, так как нет внутреннего html-элемента настоящий, к которому можно было бы прикрепить ссылку..

То, что я нашел, работает, это получение ссылки на элемент через view-child, а затем вызов

reference._elementRef.nativeElement.focus();

Надеюсь, это поможет хоть кому-то :)

HTML:

<mat-select #someRef >
    <mat-option *ngFor = "let item of items;" [value] = "item">
    {{item.name}}
    </mat-option>
</mat-select>

.тс : убедитесь, что вы импортируете MatSelect

import { MatSelect } from '@angular/material';

@ViewChild('someRef') someRef: MatSelect;


ngOnInit() {
    if (this.someRef) this.someRef.focus();
}

Надеюсь это поможет.

Во-первых, давайте создадим директиву auto-focus.directive.ts

import { AfterContentInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
     selector: '[autoFocus]' }) export class AutofocusDirective implements AfterContentInit {

     public constructor(private el: ElementRef) {     
     }

     public ngAfterContentInit() {
         setTimeout(() => {
             this.el.nativeElement.focus();
         }, 500);
     }
}

Затем нам нужно сообщить нашему AppModule, что эта новая директива существует, и объявить ее доступной, обновив наш app.module.ts :

@NgModule({
    declarations: [
        AutoFocusDirective
    ]
})

Теперь вы можете использовать его в шаблоне компонента: app.component.html

<div> Autofocus? <input appAutoFocus> </div>

Если я правильно понимаю, вы хотите сфокусировать элемент выбора при загрузке. Если это так, ваш код в полном порядке, вам просто нужно переместить логику фокуса на другое событие жизненного цикла, которое

ngAfterViewInit

HTML:

<mat-select #fff>
    <mat-option *ngFor = "let food of foods" [value] = "food.value">
      {{food.viewValue}}
    </mat-option>
</mat-select>

ТС:

export class SelectOverviewExample  implements AfterViewInit{
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild("fff", {static: false}) nameField: ElementRef;

  ngAfterViewInit() {
    this.nameField.focused = true;
  }
}

Найдите рабочую демонстрацию здесь. Вы можете видеть, что выбор выделен. прокомментируйте код внутри ngAfterViewInit() и посмотрите на эту разницу.

Мы можем использовать угловой атрибут по умолчанию для автофокуса.

<mat-form-field>
    <mat-select formControlName = "xyz" cdkFocusInitial>
        <mat-option value = "abc">Abc</mat-option>
    </mat-select>
</mat-form-field>