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.