Angular PrimeNG表单检查框组件

Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站，非常方便。这篇文章将告诉我们如何在Angular ngx bootstrap中使用日历组件。

复选框组件：它是对标准复选框元素的扩展，具有主题性。

语法:

 <p-checkbox>...</p-checkbox>

属性：

name: 此属性用于定义复选框组的名称。
value。此属性用于定义复选框的值。
label。此属性用于定义复选框的标签。
disabled:此属性用于指定该元素应被禁用。
binary。该属性用于选择一个布尔值而不是多个值。
tabindex。该属性用于定义元素在标签顺序中的索引。
inputId。该属性用于定义焦点输入的标识符，以匹配为该组件定义的标签。
ariaLabelledBy。该属性用于建立组件和标签之间的关系，其值应该是一个或多个元素ID。
ariaLabel。此属性用于定义一个字符串，用于标记输入元素。
style。该属性用于内联组件的样式。
styleClass。该属性用于样式组件的类别。
labelStyleClass。该属性用于样式化标签的类别。
checkboxIcon: 此属性用于复选框图标的Icon类。
readonly:该属性用于指定该组件不能被编辑。
required:此属性用于指定提交表单前必须勾选复选框。
trueValue。该属性用于查看复选框是否处于选中状态。
falseValue。该属性用于查看复选框是否处于选中状态。

Events:

onChange。它用于在复选框点击时调用。

Methods:

focus。这种方法是用来应用聚焦的。

Styling:

p-checkbox。这个造型是用来定义容器元素的。
p-checkbox-box。该造型用于定义图标的容器。
p-checkbox-icon。该造型用于定义图标元素。
p-checkbox-label。该造型用于定义标签元素。
p-label-active。该造型用于定义检查状态的标签元素。
p-label-focus。该造型用于定义聚焦状态的标签元素。
p-label-disabled。该造型用于定义禁用状态的标签元素。

示例1：在下面的代码中，我们将使用上述属性来演示Angular PrimeNG表单检查框组件的使用。

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Checkbox Component</h4>
    <h5>Basic</h5>
    <div class="p-field-checkbox">
        <p-checkbox [(ngModel)]="checked" 
            binary="true" inputId="binary">
        </p-checkbox>
        <label for="binary">{{checked}}</label>
    </div>
</div>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    selectedCities: string[] = [];
  
    selectedCategories: any[] = ['Technology', 'Sports'];
  
    categories: any[] = [
        { name: 'Accounting', key: 'A' }, 
        { name: 'Marketing', key: 'M' }, 
        { name: 'Production', key: 'P' }, 
        { name: 'Research', key: 'R' }
    ];
  
    checked: boolean = false;
  
    ngOnInit() {
        this.selectedCategories = this.categories.slice(1, 3);
    }
}

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

输出:

Angular PrimeNG表单检查框组件

示例2：在下面的代码中，我们将使用上述属性来演示Angular PrimeNG表单检查框组件的使用。

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Checkbox Component</h4>
    <h5>Multiple</h5>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="New York" 
            [(ngModel)]="selectedCities" inputId="ny">
        </p-checkbox>
        <label for="ny">Nallasopara</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="San Francisco" 
            [(ngModel)]="selectedCities" inputId="sf">
        </p-checkbox>
        <label for="sf">Dadar</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="Los Angeles" 
            [(ngModel)]="selectedCities" inputId="la">
        </p-checkbox>
        <label for="la">Varanasi</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="Chicago" 
            [(ngModel)]="selectedCities" inputId="ch">
        </p-checkbox>
        <label for="ch">Ayodhya</label>
    </div>
</div>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    selectedCities: string[] = [];
  
    selectedCategories: any[] = ['Technology', 'Sports'];
  
    categories: any[] = [
        { name: 'Accounting', key: 'A' }, 
        { name: 'Marketing', key: 'M' }, 
        { name: 'Production', key: 'P' }, 
        { name: 'Research', key: 'R' }
    ];
  
    checked: boolean = false;
  
    ngOnInit() {
        this.selectedCategories = this.categories.slice(1, 3);
    }
}

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