Set focus on input field when I click on a piece of text

August 15, 2022

I am trying to set my focus to an input field when I click on a piece of text on the same page. What is the bext way I can go about this? I already have a method that is attached to the text element. Here is my code.

HTML

<form-input
    appOskInput
    (inputChanged)="onInputChanged($event,'accountNumber')"
    (blurChanged)="onBlurChanged($event)"
    [formStatus]="formStatus"
    [parentFormGroup]="setupForm"
    [data]="{
      formControlName: 'accountNumber',
      name: 'accountNumber',
      label: Accounnt Number
    }">
</form-input>

<a (click)="isKeyboardActive()" class="use-kepypad"><img class="mouse-icon" src="assets/images/ford/mouse-computer.png"> <img class="mouse-icon" src="assets/images/ford/mouse-computer-hover.png">{{ 'preLogon.common.label.useKeypad'|translate }}</a>

ngOnInit() {
  this.setupForm = new FormGroup({accountNumber: new FormControl('', { validators: [Validators.required, CommonValidators.isValidNumber], updateOn: 'blur' })
}

isKeyboardActive() {
  
}

>Solution :

You could get hold of the form-input input element using ViewChid inside the consumer component by passing FormInputComponent class.

And once you get hold of form-input element, then you can easily query and focus on input element present inside form-input control.

@ViewChild(FormInputComponent, { read: ElementRef }) formInput: ElementRef;

isKeyboardActive() {
   const input = this.formInput.nativeElement.querySelector('input');
   input.focus();
}

Stackblitz