Angular PrimeNG Form Inputtext Float Label组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常容易。在这篇文章中，我们将学习如何在Angular PrimeNG中使用InputText浮动标签组件。让我们来了解一下代码中所使用的属性和语法。

Inputtext组件是一个用于输入由inputText创建的数据的元素。

语法:

<span class="p-float-label">
    <input id="..." type="text" pInputText > 
    <label for="...">...</label>
</span>

Angular PrimeNG Form Inputtext Float Label 组件属性：

• disabled:我们可以将输入组件设置为禁用。它是一个布尔数据类型，默认值是false。

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

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

ng new appname

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

cd appname

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

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

项目结构：它将看起来像如下。

运行应用程序的步骤：运行以下命令以查看输出结果

ng serve --open

例子1：这是一个基本的例子，说明如何使用**InputText浮动标签组件。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG InputText Float Label Component</h5>
  
<span class="p-float-label">
    <input id="gfg" type="text" pInputText > 
    <label for="gfg">GeeksforGeeks</label>
</span>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
  
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,
       ButtonModule,
       FormsModule
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

输出:

例子2：下面是另一个例子，说明如何使用**InputText浮动标签组件。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG InputText Float Label Component</h5>
  
<span class="p-float-label">
    <input type="text" id="gfg-sm" 
        class="p-inputtext-sm" pInputText 
    />
    <label for="gfg-sm">GfG-sm</label>
</span>
<br /><br />
<span class="p-float-label">
    <input type="text" id="gfg-md" 
        class="p-inputtext-md" pInputText 
    />
    <label for="gfg-md">GfG-md</label>
</span>
<br /><br />
<span class="p-float-label">
    <input type="text" id="gfg-lg" 
        class="p-inputtext-lg" pInputText 
     />
    <label for="gfg-lg">GfG-lg</label>
</span>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
})
  
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,
       ButtonModule,
       FormsModule
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

输出: