Angular PrimeNG Form Inputtext Properties组件

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。在这篇文章中，我们将看到Angular PrimeNG Form Inputtext Properties Component.

表单InputText组件是用来渲染一个输入字段，从用户那里获取文本输入。InputText可以使用pInputText指令应用于任何文本输入。

Angular PrimeNG Form Inputtext Properties： InputText只有一个属性，解释如下。

• disabled。这是一个布尔属性。当它出现时，输入元素将被禁用。

语法:

<input type="text" pInputText disabled/>

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

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

ng new newapp

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

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

例子1：这个例子显示了使用InputText组件的disabled属性来禁用输入元素。

• app.component.html:

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
    Angular PrimeNG Form InputText 
    Properties Component
</h4>
  
<h3 class="mt-4">Default InputText</h3>
<input
    pInputText
    [(ngModel)]="textVal1"
/>
  
<h3 class="mt-4">Disabled InputText</h3>
<input
    disabled
    pInputText
    [(ngModel)]="textVal2"
/>

• app.component.ts:

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

• app.module.ts:

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

输出:

例子2：在这个例子中，我们用一个InputSwitch来控制输入文本的disabled属性。

• app.component.html:

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>Angular PrimeNG Form InputText 
    Properties Component
</h4>
  
<h3 class="mt-4">Disable InputText with Switch</h3>
  
<p-inputSwitch
    styleClass="mb-3" 
    [(ngModel)]="isDisabled">
</p-inputSwitch>
<br>
<input
    [disabled]="isDisabled"
    pInputText
    [(ngModel)]="textVal1"
/>

• app.component.ts:

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

• app.module.ts:

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

输出:

![Angular PrimeNG Form Inputtext Properties组件](E:\Translate\img\20221111082448.gif “Angular PrimeNG Form Inputtext Properties组件”