Как настроить фокус на элементе инпута?

Question

[Ann2016]

Как настроить фокус на инпут в ангуляре? Все выходные провозилась, ничего не выходит.
Ознакомилась с этим вопросом доступ к элементу, но у меня этот вариант не заводится.

<form #formVar="ngForm" (ngSubmit)="getPlaceInQueue(formVar.value)">

            <div class="row">
                <div class="form-group col-md-12">
                    <label for="name-input" class="col-md-2 col-form-label">ФИО</label>
                    <div class="col-md-12">
                        <input class="form-control focus-input" type="text" value="" id="name-input" name="name" required #name = 'ngModel' ngModel placeholder="Введите ФИО">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <label for="example-tel-input" class="col-md-2 col-form-label">Телефон</label>
                    <div class="col-md-12">
                        <input class="form-control" type="tel" value="" id="example-tel-input" name="phoneNumber" placeholder="Введите номер телефона"
                               required minlength="15" #phoneNumber = 'ngModel' ngModel [textMask]="{mask: phoneNumberMask, guide: false}">
                    </div>
                </div>
            </div>
            <button class="btn btn-success btn-lg col-md-12 btn-block" [disabled]="formVar.form.invalid">Получить талон</button>
        </form>

Надо установить фокус на ФИО, но у меня ничего не выходит..

Answer 1

[Алексей Ярков]

А чем вас аттрибут autofocus не устроил?

Answer 2

[Артем]

Я бы лучше использовал FormBuilder и ReactiveForms

<form [formGroup]="loginForm" (ngSubmit)="onSubmitLoginForm()" novalidate>
   <input formControlName="userLogin" #userLoginInput type="email">
   <input formControlName="userPassword" type="password">
</form>

// import 
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

export class AuthorizationFormComponent {

  public loginForm : FormGroup;

  @ViewChild('userLoginInput') userLoginInput;

  constructor(
    private _builder : FormBuilder,
  ) {
    // Form builder and validation configuration
    this.loginForm = this._builder.group({
      userLogin: [ '', [ Validators.required ] ],
      userPassword: [ '', [ Validators.required ] ],
    });
  }

  onSubmitLoginForm () {
    this.userLoginInput.nativeElement.focus()
  }
}