尝试使用 Angular 和 PrimeNg 手动聚焦输入时我做错了什么？

Question

我正在将 Angular 与 PrimeNg 结合使用。我有一个类似 Google Forms 的应用程序，在该应用程序的一部分中，我有一组选项，每个选项都有一个单选按钮。我可以有“其他”选项，用户可以手动输入答案。

我希望达到与 Google Forms 相同的效果，当您单击“其他”选项的单选按钮时，输入会自动聚焦。

我在这里有一个最小的示例，您可以在其中看到我尝试过的内容：link

我尝试使用

@ViewChild()

和

Renderer2

来选择输入，这似乎在选择元素时效果很好。

好像打电话

inputRef.nativeElement.focus()

不行。

我错过了什么吗？

Answer 1

当单选按钮上有

focus

事件时，我们可以调用

click

方法，如下所示！

import { CommonModule } from '@angular/common';
import { Component, ElementRef, ViewChild, inject } from '@angular/core';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import { RadioButtonClickEvent, RadioButtonModule } from 'primeng/radiobutton';
import { InputTextModule } from 'primeng/inputtext';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RadioButtonModule,
    FormsModule,
    ReactiveFormsModule,
    InputTextModule,
  ],
  template: `<form [formGroup]="form">
  <p-radioButton value="1" formControlName="name" (click)="inputRef?.focus();"></p-radioButton>
  <input pInputText #inputRef />
  </form>`,
})
export class App {
  private fb = inject(FormBuilder);
  @ViewChild('inputRef') inputRef!: ElementRef;

  form = this.fb.group({
    name: [''],
  });

  onRadioClick(e: RadioButtonClickEvent) {
    this.inputRef.nativeElement.focus();
  }
}

bootstrapApplication(App);

Stackblitz 演示