Как убрать фокус по умолчанию на шаговый заголовок в материале angular?

Question

Я создал простое приложение в angular, используя angular библиотеку материалов, в которой я использовал компонент диалога. Когда диалог открывается пользователем, он будет иметь шаговый компонент из материала angular. Он имеет 3 шага. Каждый шаг имеет angular реактивных форм. Проблема, с которой я сталкиваюсь, заключается в том, что, когда пользователь открывает диалоговое окно, фокусирование делается непосредственно на первом шаге заголовка степпера. Я хочу сосредоточиться на контроле первой формы реактивной формы на первом шаге.

<mat-form-field class="name">
<input
  matInput
  formControlName="description"
  #name
/>
</mat-form-field>

В файле component.ts я написал

@ViewChild('name', { static: true, read: ElementRef }) name: ElementRef;

и в методе ngAfterViewInit, Я вызвал метод focus для переменной name, например:

ngAfterViewInit() {
   this.name.nativeElement.focus();
}

Это работает, но вывод, который я получаю, похож на то, как он сначала фокусируется на FormControl, а затем снова перемещает фокус на первый шаг шагового заголовка. Как я должен предотвратить фокусировку на первом шаге шагового заголовка и сохранить фокус на первом FormControl?

Answer 1

Используйте эту директиву для элемента, где ожидается начальный фокус: cdkFocusInitial, если этого недостаточно, посмотрите здесь .