angular - 如何以 react 形式设置 Prime NG 单选按钮默认值

Question

下面是我的代码，我需要将默认值传递给单选按钮。

<div class="ui-g-12">
  <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1"></p-radioButton>
</div>
<div class="ui-g-12">
  <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2"></p-radioButton>
</div>
<div class="ui-g-12">
  <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3"></p-radioButton>
</div>

谁能解释一下如何在表单加载时为单选按钮设置默认值？

Answer 1

首先将构建表单的方式更改为 ReactiveForms 方式:

<form [formGroup]="myForm">
 <div class="ui-g-12">
   <p-radioButton name="group1" value="Option 1" label="Option 1" formControlName="myRadio" inputId="opt1"></p-radioButton>
 </div>
 <div class="ui-g-12">
   <p-radioButton name="group1" value="Option 2" label="Option 2" formControlName="myRadio"  inputId="opt2"></p-radioButton>
 </div>
 <div class="ui-g-12">
   <p-radioButton name="group1" value="Option 3" label="Option 3"  formControlName="myRadio"  inputId="opt3"></p-radioButton>
 </div>
</form>

并在组件中初始化时设置默认值:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  myForm;
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myRadio: ['Option 1', []] // This set default value
    })
  }
}

运行示例:https://stackblitz.com/edit/angular-fu81jc

Primeng 文档:https://www.primefaces.org/primeng/#/radiobutton

ReactiveForms 文档:https://angular.io/guide/reactive-forms