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

Question

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

我在网上搜索了解决方案，尤其是 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() {
  }
}

预期的结果是，如果表单上只有一个单选按钮，则默认为 selected/checked，否则默认不 select/check。

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

Answer 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>

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

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

Checking PrimeNG-radiobutton by default if only one radio button exists on form

default

button

radio

primeng

angular7