1

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.

Sébastien
  • 11,860
  • 11
  • 58
  • 78

0 Answers0