Descripción general de directivas de entrada y etiquetas Angular

    Las directivas de Entrada y Etiqueta de Ignite UI for Angular se utilizan para decorar y estilizar elementos de entrada de una o varias líneas en unigx-input-group componente.

    Angular Label & Input Example

    Getting Started with Ignite UI for Angular Label & Input

    Para comenzar con las directivas 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 al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importarlosIgxInputGroupModule en tu archivo app.module.ts.

    // app.module.ts

import { FormsModule } from '@angular/forms';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package


@NgModule({
    ...
    imports: [..., IgxInputGroupModule, FormsModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importar lasIgxLabelDirective​IgxInputDirective dependencias independientesIgxInputGroupComponent o usar elIGX_INPUT_GROUP_DIRECTIVES token 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/input-group';
// 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 tienes importado el módulo o directivas del Grupo de Entrada Ignite UI for Angular, puedes empezar a usar lasigxLabel directivas yigxInput y eligx-input-group componente.

    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 eligxInput andigxLabel, tienes que envolverlos en un<igx-input-group> recipiente:

    <igx-input-group>
  <input igxInput name="fullName" type="text" />
  <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

    LaigxInput directiva podía aplicarse a<input> elementos HTML<textarea>, tanto en campos de texto de una línea como de varias líneas.

    Validación

    Podemos validar uninput usando elrequired atributo. Esto añadirá un asterisco junto a la etiqueta, indicando que este campo debe completarse. La entrada se pondrá en verde/rojo dependiendo de si la validación pasa o falla.

    <igx-input-group>
  <input igxInput name="fullName" type="text" required="required" />
  <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

    El enlace de datos

    La directiva Ignite UI for Angular Input soporta tanto la vinculación de datos unidireccional como bidireccional. El siguiente código ilustra cómo añadir un enlace de datos bidireccional usando elNgModel:

    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

    Puedes añadir lógica para forzarfocus los elementos de entrada usando laigxFocus directiva.

    <igx-input-group>
  <input igxInput [igxFocus]="isFocused" name="fullName" type="text" />
  <label igxLabel for="fullName">Full Name</label>
</igx-input-group>
    Note

    Para usar laigxFocus directiva, tienes que importar elIgxFocusModule.

    Si quieres que el texto en un elemento de entrada, marcado conigxInput, se seleccione en el enfoque, tienes que activar laigxTextSelection directiva.

    <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 usar laigxTextSelection directiva, tienes que importar elIgxTextSelectionModule.

    Grupo de entrada

    El componente Ignite UI for Angular Grupo de Entrada ayuda a los desarrolladores a crear formas fáciles de usar y estéticas. Para más información, puedes leer la documentación del Grupo de Entrada.

    API References

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.