submitとresetフォームの後でinput要素にフォーカスを設定

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;

そして最後に、右のフォームreseting後：

this.firstNameRef.nativeElement.focus()

PSを。 ：私はFormControl APIがフォーカスメソッドを公開することを期待していますが、this issue on gitHubはそれが起こらないことを示唆しています。