角度关注表单控制

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接口