Angular PrimeNG Form Inputtext Addons组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将知道如何使用Angular PrimeNG Form Inputtext Addons组件。

表单InputText组件是用来渲染一个输入字段，以接受用户的文本输入。InputText可以使用pInputText指令应用于任何文本输入。其他元素如文本、图标、按钮等可以通过在p-inputgroup类中包裹其他元素和输入框来与文本输入进行分组。附加元素应该有一个p-inputgroup-addon类应用于它们。

Angular PrimeNG Form Inputtext Addons 属性：

• disabled:InputText的这个属性用于禁用输入文本。

Angular PrimeNG Form Inputtext Addons类：

• p-inputgroup-addon。该类适用于要与输入组一起添加的附加组件。
• p-inputgroup。这个类包装了输入元素和它的附加组件。

语法:

<div class="p-inputgroup">
    <span class="p-inputgroup-addon">...</span>
    <input type="text" pInputText placeholder="...">
        ...
</div>

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

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

ng new newapp

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

cd newapp

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

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

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

例子1：在这个例子中，我们在输入文本的左边分组了一个图标，在右边分组了一个按钮。

• app.component.html:

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
    Angular PrimeNG Form InputText 
    Addons Component
</h4>
  
<div class="p-inputgroup" style="width: 350px;">
    <span class="p-inputgroup-addon">
        <i class="pi pi-at"></i>
    </span>
    <input type="text" pInputText placeholder="Enter the Email">
    <button class="p-inputgroup-addon" 
         pButton label="Submit">
    </button>
</div>

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

输出:

例子2：在这个例子中，我们将文本分组，作为input text组件末尾的一个附加部分。

• app.component.html:

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
      Angular PrimeNG Form InputText 
    Addons Component
</h4>
  
<div class="p-inputgroup" style="width: 350px;">
    <input type="text" pInputText 
           placeholder="Enter the Email">
    <span class="p-inputgroup-addon">
      @geeksforgeeks.org</span>
</div>

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

输出: