Угловой - Фокус на ввод с динамическими идентификаторами на клик - PullRequest
Новая
       40

Угловой - Фокус на ввод с динамическими идентификаторами на клик

0 голосов
/ 18 апреля 2019

* Есть много подобных вопросов, но я не нашел истинного дубликата, который отвечал бы на мой вопрос Извинения, если я что-то пропустил.

У меня есть страница с несколькими входами / кнопками (повторяется один и тот же компонент), и мне нужно сосредоточиться на правильном вводе при нажатии кнопки.

Я пробовал варианты elementRef, nativeElement, фокусировки на основе идентификатора ... но я могу заставить его сфокусироваться только на первом в DOM или на определенных ... 

<ng-template #myTemplate let-context="context">
<input #foo [id]="'myInput'+context.id" />
<button class="btn" [id]="'btnAction'+context.id (click)="focusOnInput()"></button>
</ng-template>

Что выглядит следующим образом в 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>

Вот что я пытался: 

@ViewChild("foo") focusOnThis: ElementRef;
focusOnInput(): void {
this.focusOnThis.nativeElement.focus();
}

Желаемое поведение: При нажатии на кнопку, сфокусируйтесь на соответствующем входе. В настоящее время он фокусируется только на первом или на любом указанном мной идентификаторе ...

Ответы [ 2 ]

2 голосов
/ 18 апреля 2019

Вы можете позвонить foo.focus() в обработчик нажатия кнопки. Поскольку область действия ссылочной переменной шаблона #foo является экземпляром шаблона, он будет ссылаться на элемент ввода родственного элемента. 

<ng-template #myTemplate let-context="context">
  <input #foo />
  <button class="btn" (click)="foo.focus()"></button>
</ng-template>

См. этот стек-блиц для демонстрации.

<Ч />

Если вам нужно установить фокус из метода, передайте ему foo в качестве аргумента: 

<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();
}
0 голосов
/ 18 апреля 2019

Как насчет использования атрибута данных с идентификатором и получения от него ввода? 

<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();
}
...