Компонент свойств RadioButton формы Angular PrimeNG

Опубликовано: 23 Февраля, 2023

Angular PrimeNG — это библиотека компонентов пользовательского интерфейса для приложений Angular. Он предлагает множество предварительно созданных тем и компонентов пользовательского интерфейса для различных задач, таких как ввод, меню, диаграммы, кнопки и т. д. В этой статье будет обсуждаться компонент свойств RadioButton формы Angular PrimeNG Form.

Компонент формы PrimeNG построен поверх элемента ввода радио HTML с темами. Свойство label компонента RadioButton можно использовать для предоставления метки для радиовхода. Свойства RadioButton перечислены ниже.

Свойства RadioButton формы Angular PrimeNG:

name: Это название радиогруппы.
значение: это значение переключателя. Значение по умолчанию равно нулю.
метка: это метка переключателя.
disabled: это логическое свойство, которое, если оно присутствует, отключает переключатель.
tabindex : это индекс элемента в порядке табуляции.
inputId: это идентификатор ввода фокуса, соответствующий метке компонента.
ariaLabelledBy: используется для установления связи между компонентами и метками, где значение свойства должно быть идентификатором одного или нескольких элементов.
ariaLabel: это строка, помечающая входной элемент.
стиль: это встроенный стиль элемента.
styleClass: это класс стиля компонента.
labelStyleClass: это класс стиля метки переключателя.

Синтаксис:

<p-radioButton
    labelStyleClass="..." 
    name="..." 
    value="..." 
    inputId="..."
    [disabled]="..." 
    [label]=""..."" 
    [(ngModel)]="...">
</p-radioButton>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Шаги для запуска приложения: запустите приведенную ниже команду, чтобы увидеть вывод

ng serve --open

Пример 1. Этот пример иллюстрирует использование свойств value, disabled, label, inputID и name переключателя для создания группы переключателей для выбора автомобиля.

приложение.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>
  
<h4>Choose a Car</h4>
<h5>
    Second options are disabled using the <i>disabled</i> 
    <br> property of the RadioButton Component.
</h5>
  
<div>
    <p-radioButton 
        [(ngModel)]="chosenCar" 
        name="car-group" 
        value="dzire" 
        inputId="car1" 
        label="Swift Dzire">
    </p-radioButton>
</div>
  
<div>
    <p-radioButton 
        [(ngModel)]="chosenCar" 
        name="car-group" 
        value="fortuner" 
        inputId="car2" 
        label="Toyota Fortuner" 
        [disabled]="true">
    </p-radioButton>
</div>
  
<div>
    <p-radioButton 
        [(ngModel)]="chosenCar" 
        name="car-group" 
        value="venue" 
        inputId="car3" 
        label="Hyundai Venue">
    </p-radioButton>
</div>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep p-radioButton {
            margin-top: 15px;
        }
        `
    ],
})
  
export class AppComponent {
    chosenCar?: string;
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { RadioButtonModule } from "primeng/radiobutton";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

Выход:

Пример 2. В этом примере мы использовали свойство labelStyleClass . радиокнопки, чтобы применить пользовательский CSS к метке радиокнопки.

приложение.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>
  
<h5>
    The label is styled using the <i>labelStyleClass</i>
    <br> property of the RadioButton Component.
</h5>
  
<h4>Are you familiar with Java?</h4>
  
  
<div>
    <p-radioButton 
        [(ngModel)]="ans" 
        labelStyleClass="custom-label-yes"
        name="java" 
        value="yes" 
        inputId="ans-yes" 
        label="Yes, I know Java.">
    </p-radioButton>
</div>
  
<div>
    <p-radioButton 
        [(ngModel)]="ans" 
        labelStyleClass="custom-label-no"
        name="java" 
        value="no" 
        inputId="ans-no" 
        label="No, I can"t code in Java.">
    </p-radioButton>
</div>

app.component.css

CSS

:host ::ng-deep p-radioButton {
    margin-top: 15px;
}
  
:host ::ng-deep .custom-label-yes {
    color: white;
    font-weight: bold;
    background-color: green;
}
  
:host ::ng-deep .custom-label-no {
    color: white;
    font-weight: bold;
    background-color: red;
}

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
  
export class AppComponent {
    ans?: string;
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { RadioButtonModule } from "primeng/radiobutton";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/radiobutton

Technical Scripter Picked AngularJS

Компонент свойств RadioButton формы Angular PrimeNG

HTML

Javascript

Javascript

HTML

CSS

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ