Visão geral de diretivas de entrada e rótulo Angular

    As diretivas Ignite UI for Angular Input e Label são usadas para decorar e estilizar elementos de entrada de linha única ou multilinha em um componente igx-input-group.

    Angular Label & Input Example

    Getting Started with Ignite UI for Angular Label & Input

    Para começar a usar as diretivas Ignite UI for Angular Label e Input, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxInputGroupModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar IgxLabelDirective, IgxInputDirective e IgxInputGroupComponent como dependências autônomas ou usar o token IGX_INPUT_GROUP_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // 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';
}

    Agora que você importou o módulo ou as diretivas do Ignite UI for Angular Input Group, você pode começar a usar as diretivas igxLabel e igxInput e o componente igx-input-group.

    Using the Angular Label & Input

    O estilo padrão das diretivas Label e Input segue a especificação dos campos de texto nas diretrizes do Material Design.

    Para usar igxInput e igxLabel, você precisa envolvê-los em um contêiner <igx-input-group>:

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

    A diretiva igxInput pode ser aplicada aos elementos HTML <input> e <textarea>, tanto em campos de texto de linha única quanto de várias linhas.

    Validação

    Podemos validar uma input usando o atributo required. Isso adicionará um asterisco ao lado do rótulo, indicando que esse campo deve ser preenchido. A entrada ficará verde/vermelha dependendo se a validação passa/falha.

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

    Data Binding

    A diretiva Ignite UI for Angular Input suporta vinculação de dados unidirecional e bidirecional. O código a seguir ilustra como adicionar uma vinculação de dados bidirecional usando o NgModel:

    public user = {
    fullName: ""
};

    em nossa marcação:

    <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

    Você pode adicionar lógica para forçar focus em elementos de entrada usando a diretiva igxFocus.

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

    Para usar a diretiva igxFocus, você precisa importar o IgxFocusModule.

    Se você quiser que o texto em um elemento de entrada, marcado com igxInput, seja selecionado no foco, você precisa habilitar a diretiva 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 usar a diretiva igxTextSelection, você precisa importar o IgxTextSelectionModule.

    Grupo de Entrada

    O componente Ignite UI for Angular Input Group ajuda os desenvolvedores a criar formulários estéticos e fáceis de usar. Para mais informações, você pode ler o tópico separado aqui.

    API References

    Additional Resources

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.