如何在无效形式中设置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