Angular PrimeNG Form RadioButton事件组件

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG Form RadioButton Events组件。

PrimeNG表单组件是建立在具有主题性的HTML单选输入元素之上的。RadioButton组件的label属性可以用来为单选输入提供一个标签。RadioButton的事件列举如下。

Angular PrimeNG Form RadioButton事件：

onClick。一个回调函数可以是这个事件，当用户点击单选按钮时被调用。
onFocus。一个回调函数可以是这个事件，当单选按钮被聚焦时被调用。
onBlur: 一个回调函数可以是这个事件，当单选按钮失去焦点时被调用。

Angular PrimeNG Form RadioButton 事件属性：

name: 它是无线电组的名称。
value。它是单选按钮的值。默认值为空。
label。这是该单选按钮的标签。
disabled。这是一个布尔属性，当存在时，禁用单选按钮。
tabindex : 它是该元素在标签顺序中的索引。
inputId。它是焦点输入的ID，以匹配组件的标签。

语法:

<p-radioButton
    name="..."
    **(Event-Name)="Callback()"**
    value="..." 
    inputId="..."
    [label]="'...'" 
    [(ngModel)]="...">
</p-radioButton>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步 。在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG Form RadioButton事件组件

Project Structure

例子1：在这个例子中，我们使用了RadioButton的onFocus和onBlur事件，当一个单选按钮得到或失去焦点时，显示一个祝酒信息。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>
  
<h4 class="mb-0">Are you a student?</h4>
<div>
    <p-radioButton name="group1"
                   (onFocus)="radio1Focus()"
                   (onBlur)="radio1Blur()" 
                   value="YES" 
                   inputId="rad1"
                   [label]="'Yes'" 
                   [(ngModel)]="group1">
    </p-radioButton>
</div>
  
<div>
    <p-radioButton name="group1" 
                   (onFocus)="radio2Focus()"
                   (onBlur)="radio2Blur()" 
                   value="NO" 
                   inputId="rad2" 
                   [label]="'No'" 
                   [(ngModel)]="group1">        
    </p-radioButton>
</div>
  
<p-toast></p-toast>

app.component.ts

import { Component } from '@angular/core';
import { Message, MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep p-radioButton {
            margin-top: 15px;
        }
        `
    ],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mService: MessageService) { }
    group1?: string;
  
    radio1Focus() {
        this.mService.add({
            severity: "success",
            summary: "Option1 In Focus",
            detail: "onFocus Event Triggered"
        })
    }
  
    radio1Blur() {
        this.mService.add({
            severity: "error",
            summary: "Option1 Out of Focus",
            detail: "onBlur Event Triggered"
        })
    }
  
  
    radio2Focus() {
        this.mService.add({
            severity: "success",
            summary: "Option2 In Focus",
            detail: "onFocus Event Triggered"
        })
    }
  
    radio2Blur() {
        this.mService.add({
            severity: "error",
            summary: "Option2 Out of Focus",
            detail: "onBlur Event Triggered"
        })
    }
}

app.module.ts

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';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form RadioButton事件组件

例子2：在这个例子中，我们使用RadioButton的onClick事件来检测用户何时点击单选按钮并显示敬酒信息。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>
  
<h4 class="mb-0">Are you a student?</h4>
<div>
    <p-radioButton name="group1"
                   (onClick)="radio1Click()"
                   value="YES" 
                   inputId="rad1"
                   [label]="'Yes'" 
                   [(ngModel)]="group1">        
    </p-radioButton>
</div>
  
<div>
    <p-radioButton name="group1" 
                   (onClick)="radio2Click()"
                   value="NO" 
                   inputId="rad2" 
                   [label]="'No'" 
                   [(ngModel)]="group1">        
    </p-radioButton>
</div>
<p-toast></p-toast>

app.component.ts

import { Component } from '@angular/core';
import { MessageService} from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep p-radioButton {
            margin-top: 15px;
        }
        `
    ],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mService: MessageService){}
    group1?: string;
  
    radio1Click()
    {
        this.mService.add({
            severity: "success",
            summary: "Option1 Clicked",
            detail: "onClick Event Triggered"
        })
    }
  
    radio2Click() {
        this.mService.add({
            severity: "info",
            summary: "Option2 Clicked",
            detail: "onClick Event Triggered"
        })
    }
}

app.module.ts

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';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form RadioButton事件组件