如果表单上只有一个单选按钮，则默认检查 PrimeNG-radiobutton答案

【问题标题】：Checking PrimeNG-radiobutton by default if only one radio button exists on form如果表单上只有一个单选按钮，则默认检查 PrimeNG-radiobutton
【发布时间】：2019-10-08 05:56:18
【问题描述】：

我开始为 Angular7 使用 PrimeNG 组件并设置了我的第一个单选按钮。我能够设置默认选中的特定单选按钮。然而，我的目标是计算表单上存在的单选按钮的数量，并设置默认选中的单选按钮，如果表单上只有一个单选按钮。如果值是硬编码的，这不是非常理想的方法，但我稍后会为此应用程序添加后端，因此计算单选按钮的数量（来自数据库的行）至关重要。

我已经在网上搜索过解决方案，尤其是 Stack，但我只能努力获得 AngularJS 或其他相关解决方案。我想坚持使用 Angular。我正在使用 Angular7 和 PrimeNG UI 组件。

（PrimeNG 文档：https://www.primefaces.org/primeng/#/radiobutton）

home.component.html

<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="preopt1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="preopt2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="preopt3"></p-radioButton></div>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  val1: string = 'Option 1';

  constructor() { }

  ngOnInit() {
  }
}

预期结果是，如果表单上只有一个单选按钮，则默认选中/选中它，否则默认不选中/选中任何内容。

我是 Angular 的新手，但非常渴望学习。任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： button angular7 default primeng radio

【解决方案1】：

我的解决办法是这样的：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  val1: string;

  radios = [
    {
      value: 'Option 1',
      label: 'Option 1',
      inputId: 'preopt1'
    },
    {
      value: 'Option 2',
      label: 'Option 2',
      inputId: 'preopt2'
    },
    {
      value: 'Option 3',
      label: 'Option 3',
      inputId: 'preopt3'
    }
  ];

  constructor() {
    if ( this.radios.length === 1 ) {
      this.val1 = this.radios[0].value;
    } else {
      this.val1 = 'None';
    }
  }

  ngOnInit() {
  }
}

home.component.html

<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton *ngFor="let i of radios" name="group2" [value]="i.value" [label]="i.label" [(ngModel)]="val1" [inputId]="i.inputId"></p-radioButton></div>
</div>

您可以删除 radios 数组的 2 个元素，以便查看组件的行为。

【讨论】：