Descripción general de las directivas de entrada y etiquetas Angular
La Ignite UI for Angular Input y Label se utilizan para decorar y diseñar elementos de entrada de una o varias líneas en un componente igx-input-group
.
Angular Label & Input Example
Getting Started with Ignite UI for Angular Label & Input
Para comenzar con Ignite UI for Angular Label y Input, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxInputGroupModule
en su archivo app.module.ts.
// app.module.ts
import { FormsModule } from '@angular/forms';
import { IgxInputGroupModule } from 'igniteui-angular';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxInputGroupModule, FormsModule],
...
})
export class AppModule {}
Alternativamente, a partir de 16.0.0
, puede importar IgxLabelDirective
, IgxInputDirective
e IgxInputGroupComponent
como dependencias independientes, o usar el token IGX_INPUT_GROUP_DIRECTIVES
para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { FormsModule } from '@angular/forms';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-input-group>
<input igxInput name="fullName" type="text" [(ngModel)]="fullName" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule]
/* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */
})
export class HomeComponent {
public fullName = 'John Doe';
}
Ahora que ha importado el módulo o las directivas Ignite UI for Angular Input Group, puede comenzar a usar las directivas igxLabel
e igxInput
y el componente igx-input-group
.
Using the Angular Label & Input
El estilo predeterminado de las directivas Etiqueta y Entrada sigue la especificación de campos de texto en las pautas de Diseño de materiales.
Para usar igxInput
e igxLabel
, debes envolverlos en un contenedor <igx-input-group>
:
<igx-input-group>
<input igxInput name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
La directiva igxInput
podría aplicarse a elementos HTML <input>
y <textarea>
, tanto en campos de texto de una sola línea como de varias líneas.
Validación
Podemos validar una input
usando el atributo required
. Esto agregará un asterisco al lado de la etiqueta, indicando que este campo debe completarse. La entrada se volverá verde/roja dependiendo de si la validación pasa/falla.
<igx-input-group>
<input igxInput name="fullName" type="text" required="required" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
Data Binding
La directiva Ignite UI for Angular Input admite el enlace de datos unidireccional y bidireccional. El siguiente código ilustra cómo agregar un enlace de datos bidireccional usando NgModel
:
public user = {
fullName: ""
};
en nuestro marcado:
<igx-input-group>
<input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
Focus & Text Selection
Puede agregar lógica para forzar focus
en los elementos de entrada usando la directiva igxFocus
.
<igx-input-group>
<input igxInput [igxFocus]="isFocused" name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
Note
Para utilizar la directiva igxFocus
, debe importar IgxFocusModule
.
Si desea que el texto en un elemento de entrada, marcado con igxInput
, se seleccione en el foco, debe habilitar la directiva igxTextSelection
.
<igx-input-group>
<input igxInput [igxTextSelection]="true" [igxFocus]="isFocused" name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
<igx-input-group>
<input igxInput [igxTextSelection]="true" name="email" type="text" />
<label igxLabel for="email">Email</label>
</igx-input-group>
Note
Para utilizar la directiva igxTextSelection
, debe importar IgxTextSelectionModule
.
Grupo de entrada
El componente Ignite UI for Angular Input Group ayuda a los desarrolladores a crear formas estéticas y fáciles de usar. Para obtener más información, puede leer el tema independiente aquí.
API References
Additional Resources
Temas relacionados:
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.