如何专注于 PrimeNG p 按钮

Question

我在 Angular 中有一个表格。按下 Enter 键后，我想专注于下一个控件。在每个输入的 keyup.enter 事件上，我使用下一个输入的 ref 并调用 focus()。但这不适用于 p-button.

<div class="p-field p-col-12 p-md-6">
  <label>Address Line 1</label>
  <input #regAddressLine1 type="text" pInputText [readonly]="!editMode" formControlName="regAddressLine1" (keyup.enter)="regAddressLine2.focus()">
  <small class="p-invalid" *ngIf="f.regAddressLine1.invalid && f.regAddressLine1.touched">Required</small>
</div>
<div class="p-field p-col-12 p-md-6">
  <label>Address Line 2</label>
  <input #regAddressLine2 type="text" pInputText [readonly]="!editMode" formControlName="regAddressLine2" (keyup.enter)="save.focus()">
  <small class="p-invalid" *ngIf="f.regAddressLine2.invalid && f.regAddressLine2.touched">Required</small>
</div>
<div class="p-col-12 p-md-3">
  <p-button #save label="Save" styleClass="p-button-primary">
  </p-button>
</div>

Answer 1

好像p-button组件没有这样的方法。

我会考虑使用primeng按钮的属性版本：

<button #save pButton label="Save" styleClass="p-button-primary" type="button"></button>
              ^^^^^^^^

这样 #save 模板变量引用具有 focus() 方法的本机 HTMLButtonElement。

Forked Stackblitz

如何专注于 PrimeNG p 按钮

How to focus on PrimeNG p-button

focus

primeng

angular