Angular PrimeNG Form Checkbox Events组件

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的网络解决方案。在这篇文章中，我们将看到**Angular PrimeNG表单复选框事件组件。

PrimeNG提供的复选框组件是HTML复选框的扩展，具有主题性，用于接受用户的布尔值的输入。复选框组件只有一个事件，即当复选框的值改变时，onChange事件被触发。

Angular PrimeNG Form Checkbox Events 组件属性：

label。label属性用于设置复选框的标签。
binary。这是一个布尔值属性，用于将复选框的值保存为布尔值。
ngModel : 该属性用于将一个布尔变量与复选框的值绑定。

Angular PrimeNG表格复选框组件事件：

onChange。每当复选框的值发生变化时，该事件就会触发。

语法:

<p-checkbox
    **(onChange)="Callback-Function"**
    [binary]="true | false"
    [(ngModel)]="..." 
    label="Checkbox">
</p-checkbox>

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

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

ng new appname

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

cd appname

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

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

项目结构。按照上述步骤，项目结构将看起来像这样。

Angular PrimeNG Form Checkbox Events组件

Project Structure

运行下面的命令可以看到输出。

ng serve --open

例子1：在这个例子中，我们使用复选框组件的onChange事件来记录复选框的状态，只要它被选中或取消选中。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Form 
        Checkbox Events Component
      </h3>
</div>
  
<div class="example-container">
    <div class="checkbox">
        <p-checkbox
            (onChange)="change()"
            [binary]="true"
            [(ngModel)]="checked" 
            label={{checked}}>
        </p-checkbox>
    </div>
</div>

div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
div.checkbox {
  flex-direction: row;
}
  
.header h2 {
  margin-bottom: 0;
  color: green;
}
  
label {
  margin-left: 10px;
}

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  checked: boolean = false;
  
  public change() {
    console.log(this.checked ? "Checked" : "Unchecked");
  }
}

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 { CheckboxModule } from "primeng/checkbox";
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    BrowserModule,
    CheckboxModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Form Checkbox Events组件

例子2：在这个例子中，我们使用消息组件，用onChange事件来显示复选框的状态。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Form 
          Checkbox Events Component
      </h3>
</div>
  
<div class="example-container">
    <div class="checkbox">
        <p-checkbox
            (onChange)="change()"
            [binary]="true"
            [(ngModel)]="checked" 
            label={{checked}}>
        </p-checkbox>
   </div>
    <p-messages></p-messages>
</div>

div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
div.checkbox {
  flex-direction: row;
}
  
.header h2 {
  margin-bottom: 0;
  color: green;
}
  
label {
  margin-left: 10px;
}

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  providers: [MessageService],
})
export class AppComponent {
  constructor(private messageService: MessageService) {}
  checked: boolean = false;
  
  public change() {
    this.messageService.add({
      severity: this.checked ? "success" : "error",
      summary: "Value changed: ",
      detail: this.checked ? "Checked" : "Unchecked",
    });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
  
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CheckboxModule } from 'primeng/checkbox';
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    MessageModule,
    MessagesModule,
    BrowserModule,
    CheckboxModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Form Checkbox Events组件