Фокус на невидимый объект

Question

Итак, я нашел следующий пример того, как сфокусироваться на объекте в Angular.

https://codeburst.io/focusing-on-form-elements-the-angular-way-e9a78725c04f

Это работает просто отлично, так как Пока текстовое поле всегда было видно. Я пробовал и с скрытым, и с * ngIf, меняя логическую переменную, и он всегда не сможет найти объект.

Кто-нибудь знает, что мне нужно сделать по-другому, чтобы установить фокус после отображения объекта?

Спасибо

Answer 1

помните, что вам нужно выдохнуть Angular, чтобы убедиться, что он виден или нет. Вы даете это дыхание, используя setTimeout ()

Представьте, что у вас есть форма типа

<form [formGroup]="form">
  <input type="checkbox" [ngModel]="check" 
  (ngModelChange)="check=$event;focus()"
  [ngModelOptions]="{standalone: true}"
  >Surname visible
  <input formControlName="name">
  <input #surnameControl *ngIf="check" formControlName="surname">

  </form>

В вашем .ts

  @ViewChild('surnameControl',{static:false}) control:ElementRef
  focus()
  {
    //outside setTimeout this.control is undefined
    setTimeout(()=>{
      this.control.nativeElement.focus()
    })
  }

См. простой пример