Angular表单按Enter键聚焦PrimeNG p-button失效问题求助

嘿，这个问题我之前也碰到过！PrimeNG的p-button是封装过的组件，你直接调用模板引用的focus()肯定没用，因为#save指向的是PrimeNG的Button组件实例，不是原生的<button>DOM节点——原生DOM元素的focus()方法才是我们需要的。

下面给你两种可行的解决方案：

方案一：模板中直接访问原生元素 #

PrimeNG的Button组件暴露了el属性，它指向组件内部封装的原生DOM元素。你可以直接在模板里通过这个属性调用focus()：

修改Address Line 2输入框的事件绑定：

<input #regAddressLine2 type="text" pInputText [readonly]="!editMode" formControlName="regAddressLine2" (keyup.enter)="save.el.nativeElement.focus()">

对应的按钮部分不用改，保持原来的模板引用即可：

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

方案二：在组件类中处理（更可控） #

如果你需要更灵活的控制，比如添加额外逻辑，可以在组件类中通过ViewChild获取Button组件实例，再访问其原生元素：

1. 首先在组件类中导入必要的模块并定义ViewChild：

import { Component, ViewChild } from '@angular/core';
import { Button } from 'primeng/button';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  // 获取p-button组件实例
  @ViewChild('save') saveButton!: Button;

  // 定义聚焦按钮的方法
  focusSaveButton() {
    // 访问原生按钮元素并调用focus()
    this.saveButton.el.nativeElement.focus();
  }
}

2. 然后修改模板中的事件绑定，调用这个方法：

<input #regAddressLine2 type="text" pInputText [readonly]="!editMode" formControlName="regAddressLine2" (keyup.enter)="focusSaveButton()">

这样就能实现按Enter键时，成功聚焦到Save按钮了！

内容的提问来源于stack exchange，提问作者sal