Primeng RadioButton 标签

如何解决Primeng RadioButton 标签

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

<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 和外观与预期一样，但是当我单击标签时，单选按钮不会变为“已选中”。

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

我希望我能够解释这个场景。

提前致谢。

解决方法

有几种方法可以通过radio组件累积同步标签点击

• 使用标签 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>

即使在您的问题中也只是触发选择方法

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

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

stackblitz demo ??