I want to be able to focus any HTML control (input, select, or textaera) that is part of my FormGroup.
Basically I need the Angular2 equivalent to:
document.getElementById('email').focus();
Here is a sample of what my FormGroup looks like:
this.contactForm = this.formBuilder.group({
email: ['', [Validators.required, this.validEmail]],
message: ['', Validators.required]
});
And here is the relevant HTML :
<form[formGroup]="contactForm" (ngSubmit)="submitContactForm()" novalidate>
<ion-item>
<ion-label>E-mail</ion-label>
</ion-item>
<ion-input type="email" [(ngModel)]="contactForm.email" formControlName="email"></ion-input>
<ng-container *ngIf="contactForm.controls['email'].touched">
<div *ngIf="contactForm.controls['email'].hasError('required')" class="form-error-message">Veuillez saisir votre adresse e-mail.</div>
<div *ngIf="!contactForm.controls['email'].hasError('required') && contactForm.controls['email'].hasError('validEmail')" class="form-error-message">L'adresse e-mail saisie est invalide.</div>
</ng-container>
<ion-item>
<ion-label>Détail</ion-label>
<ion-textarea [(ngModel)]="contactForm.message" formControlName="message"></ion-textarea>
</ion-item>
<ng-container *ngIf="contactForm.controls['message'].touched">
<div *ngIf="contactForm.controls['message'].hasError('required')" class="form-error-message">Veuillez saisir une description du problème.</div>
</ng-container>
</form>
This works fine but I would like to be able to focus any one of these inputs from inside my component class.
I am not interested in solutions that require a button to be clicked in the template, I really need a way to give focus to any arbitrary control that exists in my form.