问题
*There are a lot of similar questions but I have not found a true duplicate that answers my question Apologies if I missed something.
I have a page with several inputs/buttons (The same component repeated) and need to focus on the correct input upon button click.
I have tried variations of elementRef, nativeElement, focusing based on the ID... but I can only get it to focus on the first one in the DOM or specific ones...
<ng-template #myTemplate let-context="context">
<input #foo [id]="'myInput'+context.id" />
<button class="btn" [id]="'btnAction'+context.id (click)="focusOnInput()"></button>
</ng-template>
Which renders like this in the DOM:
<input #foo id="myInput1" />
<button class="btn" id="btnAction1></button>
<input #foo id="myInput2" />
<button class="btn" id="btnAction2></button>
<input #foo id="myInput3" />
<button class="btn" id="btnAction3></button>
This is what I've been trying:
@ViewChild("foo") focusOnThis: ElementRef;
focusOnInput(): void {
this.focusOnThis.nativeElement.focus();
}
Desired behavior: When clicking on the button, focus on the respective input. Currently, it only focuses on the first one, or whichever ID I specify...
回答1:
You can call foo.focus()
in the button click handler. Since the scope of the template reference variable #foo
is the template instance, it will refer to the sibling input element.
<ng-template #myTemplate let-context="context">
<input #foo />
<button class="btn" (click)="foo.focus()"></button>
</ng-template>
See this stackblitz for a demo.
If you need to set the focus from a method, pass foo
to it as an argument:
<ng-template #myTemplate let-context="context">
<input #foo />
<button class="btn" (click)="focusOnInput(foo)"></button>
</ng-template>
focusOnInput(input): void {
// Do something else here
...
input.focus();
}
回答2:
How about to use a data-attribute with id and get the input from it?
<ng-template #myTemplate let-context="context">
<input [attr.data-group]="context.id" />
<button class="btn" [attr.data-group]="context.id" (click)="focusOnInput($event)"></button>
</ng-template>
<input data-group="1" />
<button class="btn" data-group="1"></button>
<input data-group="2" />
<button class="btn" data-group="2"></button>
<input data-group="3" />
<button class="btn" data-group="3"></button>
// component constructor
constructor(
private readonly elementRef: ElementRef,
// ...
) {
// ...
}
focusOnInput(event: MouseEvent): void {
const groupId = (<HTMLElement>event.target).dataset.group;
const input = this.elementRef.nativeElement.querySelector(`input[data-group="${groupId}"]`);
input.focus();
}
来源:https://stackoverflow.com/questions/55747829/angular-focus-on-input-with-dynamic-ids-on-click