Angular 专注于表单控件

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

Angular 专注于表单控件

Angular focus on formcontrol

forms

focus

angular6