Angular PrimeNG Form Checkbox Properties组件

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

复选框属性组件：它是对标准复选框元素的主题化扩展，属性用于为组件添加一些额外的功能。

属性:

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

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

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

ng new appname

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

cd appname

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

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

项目结构:

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

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Checkbox Properties 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 { }

输出:

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

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Checkbox Properties 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 { }

输出: