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()" ><img src="assets/images/ford/mouse-computer.png"> <img src="assets/images/ford/mouse-computer-hover.png">{{ 'preLogon.common.label.useKeypad'|translate }}</a>
TS
ngOnInit() {
this.setupForm = new FormGroup({accountNumber: new FormControl('', { validators: [Validators.required, CommonValidators.isValidNumber], updateOn: 'blur' })
}
isKeyboardActive() {
}
CodePudding user response:
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();
}