Как установить автофокус в mat-select? - PullRequest
0 голосов
/ 08 февраля 2019

В моем угловом проекте есть угловой материал и используйте mat-select.Mat-select - это первый элемент для моей формы, в моем случае установлен автофокус, когда страница была успешно загружена, но я не смог установить автофокус на mat-select.Любой может помочь мне найти способ установки автофокуса в mat-select.

@ViewChild("name") nameField: ElementRef;

ngOninit() {
  this.nameField.nativeElement.focus();
} 

html

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

Ответы [ 5 ]

0 голосов
/ 11 июля 2019

HTML:

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

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

import { MatSelect } from '@angular/material';
@ViewChild('someRef') someRef: MatSelect;


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

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

0 голосов
/ 28 мая 2019

Так как это первый хит, который появляется в Google, я предоставлю то, что нашел:

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

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

reference._elementRef.nativeElement.focus();

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

0 голосов
/ 08 февраля 2019

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

ts:

 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>

РЕДАКТИРОВАТЬ: Извините,Я думаю, что вы не можете получить nativeElement от mat-select и md-select.Вам нужно получить объект и позвонить open().Рабочий проект здесь в stackblitz

0 голосов
/ 08 февраля 2019

Попробуйте использовать 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>

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

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

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

  ngOnInit() {
    this.mySelect.focused = true;
  }  
}
0 голосов
/ 08 февраля 2019

Вы можете адаптировать этот пример к вашему собственному проекту.Нажатие на кнопку становится фокусом.

фокусировка на элементах формы Угловой путь

показать еще

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...