Angular PrimeNG Form Inputtext 样式化组件

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。在这篇文章中，我们将看到Angular PrimeNG表单输入文本造型组件。

Angular PrimeNG Form InputText Component渲染了一个用于从用户那里获取文本数据输入的字段。InputText可以通过应用pInputText指令应用于文本输入元素。

Angular PrimeNG Form InputText Directive：。

• pInputText。这条指令用于将InputText应用于一个输入元素。

Angular PrimeNG Form InputText Styling Class:它只有一个造型类，如下所示。

• p-inputtext。该类应用于输入元素。

语法:

// In app.component.html
<input type="text" **pInputText** />

// In app.component.css
:host ::ng-deep .Styling-Classes {
    // CSS Properties
}

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

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

ng new newapp

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

cd newapp

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

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

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

例子1：在这个例子中，我们使用输入文本元素的p-inputtext类来改变文本和边框的颜色为绿色。

• app.component.html

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form InputText 
        Styling Component
    </h4>
  
    <input type="text" 
        pInputText 
        [(ngModel)]="textValue"
    />
</div>

• app.component.css

:host ::ng-deep .p-inputtext {
    color: green;
    border: 2px solid green;
    border-radius: 10px;
}
  
:host ::ng-deep .p-inputtext:focus:enabled, 
:host ::ng-deep .p-inputtext:hover
{
    box-shadow: none;
    border: 2px solid green;
}

• app.component.ts

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

• 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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputTextModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

输出:

例子2：在这个例子中，我们去掉了InputText的边框，并给它一个背景颜色，还使用了text-transform属性，把文字改为大写。

• app.component.html

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form InputText 
        Styling Component
    </h4>
  
    <h3>Default InputText</h3>
    <input type="text" 
        pInputText 
        [(ngModel)]="textValue1"
    />
  
    <h3>Customised InputText</h3>
    <input 
        class="custom-text"
        type="text" 
        pInputText 
        [(ngModel)]="textValue2"
    />
</div>

• app.component.css

:host ::ng-deep .custom-text.p-inputtext {
    border: none;
    padding: 12px;
    color: green;
    text-transform: uppercase;
    background: #ececec;
    border-radius: 10px
}
  
:host ::ng-deep .custom-text.p-inputtext:focus:enabled, 
:host ::ng-deep .custom-text.p-inputtext:hover
{
    box-shadow: none;
    background: #e2e2e2;
    border: none;
}

• app.component.ts

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

• 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';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputTextModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

输出: