Обновить атрибут «автофокус» через взаимодействие на уровне шаблона в угловых

Question

Возникла проблема с атрибутом autofocus в сотрудничестве с Angular. Подробно у меня есть <form> с <input type="text"> сверху, который изначально сфокусирован на условии.

<input [attr.autofocus]="selection===-1"
       [(ngModel)]="myForm.firstInpElem" 
       name="firstInpElem" 
       placeholder="firstInpElem">

Работает как положено (Chrome).

Затем форма непрерывная с выбором между двумя вариантами, контролируемыми <input type="radio">.

После того, как выбор сделан, отображается соответствующий элемент, а затем должен получить autofocus.

Но этого не происходит, и я не понимаю причину этого.

Подготовлен стекблиц с рабочим примером , но в основном ниже приведена разметка, которая не будет работать должным образом

<code><h1>Forms example</h1>

<form>

  <pre>Condition to focus "firstInpElem" is {{selection===1|json}}

Этот элемент ввода автоматически фокусируется при загрузке страницы

Укажите одну из двух данных:
Опция 1
Вариант 2

Condition to focus "secondInpElem" is {{selection===1|json}}

Condition to focus "thirdInpElem" is {{selection===2|json}}

{{myForm|json}}

Answer 1

Другой вариант - скрыть входные данные (не использовать * ngIf, иначе display.style) и ссылочные переменные. см https://stackblitz.com/edit/angular-sbc4pp?file=src%2Fapp%2Fapp.component.html

    <label>
      <input [ngModel]="selection" (change)="change(second,1)" 
             name="radioInpElem"
             type="radio"
             [value]="1"> 
             Option 1
    </label>
    <br>
    <label>
      <input [ngModel]="selection" (change)="change(third,2)"
             name="radioInpElem"
             type="radio"
             [value]="2">
             Option 2
    </label>

  <input #second [style.display]="selection===1?'inherit':'none'"
        [(ngModel)]="myForm.secondInpElem"
        name="secondInpElem"
        placeholder="secondInpElem">

  <input #third [style.display]="selection===2?'inherit':'none'"
          [(ngModel)]="myForm.thirdInpElem"
          name="thirdInpElem"
          placeholder="thirdInpElem">

Ваша функция меняется как

  change(element:any,index:number)
  {
  this.selection=index;
  setTimeout(()=>{element.focus()},0);
  }

Answer 2

Если вы включите средства разработки (инструменты F12), вы увидите, что новый элемент управления вводом фактически получает атрибут autofocus, но не получает фокус. Это потому, что autofocus устанавливает фокус на элемент , когда страница загружается . В вашем случае страница уже загружена, когда новый элемент становится видимым.

Вместо этого вы можете программно установить фокус на новый элемент ввода. Для этого вы можете определить общую ссылочную переменную шаблона для двух входных элементов, имеющих условие ngIf:

<input #inputElement *ngIf="selection === 1"
      [(ngModel)]="myForm.secondInpElem"
      name="secondInpElem"
      placeholder="secondInpElem">

<input #inputElement *ngIf="selection === 2"
        [(ngModel)]="myForm.thirdInpElem"
        name="thirdInpElem"
        placeholder="thirdInpElem">

и отслеживайте наличие этих элементов с помощью ViewChildren и события QueryList.changes. Каждый раз, когда один из элементов ввода становится видимым, вы устанавливаете фокус на него:

@ViewChildren("inputElement") inputElements: QueryList<ElementRef>;

ngAfterViewInit() {
  this.inputElements.changes.subscribe(() => {
    this.inputElements.last.nativeElement.focus();
  });
}

См. этот стек для демонстрации.