Угловой фокус на контроле формы

Question

У меня есть следующий ввод:

 <input
                #participantInput="ngModel"
                id="participantInput"                  
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
                class="cell small-7"
                placeholder="John.Doe@gmail.com"
                [(ngModel)]="newParticipantMail"
                (keyup.enter)="addParticipant()"
                style="height:10%;">

Из-за #participantInput="ngModel"

Я не могу получить elementRef как:

@ViewChild('participantInput') participantInput: ElementRef;

Итак, как я могу установить фокус на этом поле?

Answer 1

Вы можете добавить еще одну переменную шаблона, например:

 <input
            #participantInput="ngModel"
            #participantRef
            id="participantInput"                  
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
            class="cell small-7"
            placeholder="John.Doe@gmail.com"
            [(ngModel)]="newParticipantMail"
            (keyup.enter)="addParticipant()"
            style="height:10%;">

Затем вы можете получить доступ к нему в вашем компоненте

@ViewChild('participantRef') participantRef: ElementRef;

Очевидно, вы должны дождаться инициализации представления, например, для реализации AfterViewInit интерфейса