submit 및 reset 양식을 입력 한 후 입력 요소에 포커스를 설정했습니다.

Question

저는 angular2로 템플릿 양식 구성 요소를 사용하고 있으며 양식을 제출 한 후 firstName 입력 요소에 포커스를 설정할 수 없습니다. 양식은 잘 재설정되지만 초점을 설정할 방법이 없습니다.

이 내 구성 요소 코드 :

export class TemplateFormComponent { 

    @ViewChild('f') form: any; 

    onSubmit() { 
    if (this.form.valid) { 
     console.log("Form Submitted!"); 
     this.form.reset(); 
     this.form.controls.firstName.focus(); 
    } 
    } 
} 

내 템플릿 코드 :

보기에

<form novalidate autocomplete="off" #f="ngForm" (ngSubmit)="onSubmit()"> 
<div class="form-group"> 
    <label>First Name</label> 
    <input type="text" 
     class="form-control" 
     name="firstName" 
     [(ngModel)]="model.firstName" 
     required 
     #firstName="ngModel"> 
</div> 
</form> 

Answer 1

, 당신은 초점을 맞추고 자 입력 필드에 대한 참조를 설정 (당신은 이미 가진 것을 가지고 #firstName).

그런 다음 구성 요소 코드에 @ViewChild와 그것에 액세스를 만들 : 마지막으로

@ViewChild('firstName') firstNameRef: ElementRef;

그리고를 마우스 오른쪽 양식을 다시 설정하라는 후 :

this.firstNameRef.nativeElement.focus()

추신. : FormControl API에서 포커스 메서드를 노출 할 것으로 예상되지만 this issue on gitHub은 결코 발생하지 않을 것이라고 제안합니다.