Primeng 单选按钮标签

Posted 2023-02-21

【中文标题】Primeng 单选按钮标签

【英文标题】：Primeng RadioButton Label

【发布时间】：2020-12-19 10:41:45

【问题描述】：

我刚开始学习Primeng。我正在处理单选按钮并使用标签属性来显示标签。当我在任何长度和宽度受限的组件中使用此单选按钮时，长度较长的标签会出现在单选按钮下方并破坏外观。 以下是代码：

<h5>Basic</h5>
<div class="p-field-radiobutton">
    <p-radioButton name="city" label="City(Label with lots of words)" inputId="city1"></p-radioButton>
</div>

所以我尝试了一种替代方法，我使用了标签标签并尝试了以下操作：

component.html

<h5>Basic</h5>
<div class="p-field-radiobutton">
    <p-radioButton #labelClicked name="city" inputId="city1"></p-radioButton>
    <label (click)="onlabelClick()">
    City(Lots of words)
  </label>
</div>

component.ts

import  Component, ViewChild  from '@angular/core';
import  RadioButton  from 'primeng/radiobutton'

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html'
)
export class AppComponent  
  @ViewChild("labelClicked") labelClicked : RadioButton
    onlabelClick()
      this.labelClicked.onClick.emit();
//tried this also
       this.labelClicked.checked;
        
    

现在 CSS 和外观符合预期，但是当我点击标签时，单选按钮不会变为“已选中”。

我希望每当我在这两种情况下单击单选按钮或标签时，单选按钮都应处于选中状态，并且 CSS 也应符合预期。

我希望我能解释一下这个场景。

提前致谢。

【参考方案1】：

有几种方法可以使用收音机组件来累积同步标签点击

使用标签

for

属性，因此您需要为 radioButton 设置

inputId

属性

<div class="p-field-radiobutton">
    <p-radioButton name="city" value="Chicago" [(ngModel)]="city" inputId="city1">
    </p-radioButton>
    <label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="city" value="Los Angeles" [(ngModel)]="city"inputId="city2">
  </p-radioButton>
 <label for="city2">Los Angeles</label>
</div>

触发

radioButton

组件的select方法

<p-radioButton name="city" value="Istanbul" [(ngModel)]="city" #elm></p-radioButton>
<label  (click)="elm.select()">Istanbul</label>

即使在您的问题中也只需触发 select 方法

在反应式表单或模板表单的情况下设置控件状态，这将更新组件检查状态

<div class="p-field-radiobutton">
    <p-radioButton name="city" value="Earth" [(ngModel)]="city"></p-radioButton>
    <label  (click)="city = 'Earth'">Istanbul</label>
</div>

stackblitz demo ??