如何在响应式表单中设置Prime NG单选按钮默认值

嘿，我来帮你搞定PrimeNG单选按钮设置默认值的问题！其实主要分两种常见的表单场景——模板驱动表单和响应式表单，我分别给你拆解步骤，附上代码示例，一看就明白。

这种场景下，核心就是给绑定的变量提前赋好默认值，让它和目标单选按钮的value匹配就行：

首先在组件类里定义绑定变量并赋值：

// 组件类
selectedOption: string = 'option2'; // 默认选中value为option2的单选按钮

然后在模板里用[(ngModel)]把变量和单选按钮绑定起来：

<!-- 模板 -->
<div class="p-field-radiobutton">
  <p-radioButton name="genderOptions" value="option1" [(ngModel)]="selectedOption" label="选项1"></p-radioButton>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="genderOptions" value="option2" [(ngModel)]="selectedOption" label="选项2"></p-radioButton>
</div>

表单加载时，selectedOption的初始值会自动匹配对应的单选按钮，实现默认选中。

如果用的是响应式表单，就得在初始化FormControl的时候传入默认值：

先在组件类里构建表单，给目标FormControl设置初始值：

// 组件类
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  optionsForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单时，给selectedOption控件设置默认值为option1
    this.optionsForm = this.fb.group({
      selectedOption: ['option1']
    });
  }
}

然后在模板里用formControlName绑定：

<!-- 模板 -->
<form [formGroup]="optionsForm">
  <div class="p-field-radiobutton">
    <p-radioButton name="options" value="option1" formControlName="selectedOption" label="选项1"></p-radioButton>
  </div>
  <div class="p-field-radiobutton">
    <p-radioButton name="options" value="option2" formControlName="selectedOption" label="选项2"></p-radioButton>
  </div>
</form>

小提醒：如果单选按钮的value是对象类型 #

要是你的单选按钮绑定的是对象（比如从接口返回的列表数据），一定要确保默认值的引用或结构完全匹配，不然PrimeNG没法识别匹配项。举个例子：

// 组件类
productOptions = [
  { id: 101, label: '基础版' },
  { id: 102, label: '专业版' }
];
// 默认选中专业版，直接取数组里的对应元素
selectedProduct = this.productOptions[1];

模板里循环渲染：

<div *ngFor="let prod of productOptions" class="p-field-radiobutton">
  <p-radioButton name="productOpts" [value]="prod" [(ngModel)]="selectedProduct" [label]="prod.label"></p-radioButton>
</div>

这样表单加载时就会自动选中“专业版”啦～

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