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

    As diretivas Ignite UI for Angular Entrada e Etiqueta são usadas para decorar e estilizar elementos de entrada de linha única ou múltipla linha em umigx-input-group componente.

    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 issoIgxInputGroupModule no seu arquivo 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 você pode importar oIgxLabelDirective,IgxInputDirective eIgxInputGroupComponent como dependências independentes, ou usar oIGX_INPUT_GROUP_DIRECTIVES token 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/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';
}

    Agora que você importou o módulo ou diretivas do Grupo de Entrada Ignite UI for Angular, pode começar a usar asigxLabel diretivas eigxInput e oigx-input-group componente.

    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 oigxInput eigxLabel, você precisa embrulhá-los em um<igx-input-group> recipiente:

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

    AigxInput diretriz podia ser aplicada a<input> elementos HTML<textarea>, tanto em campos de texto de linha única quanto de múltiplas linhas.

    Validação

    Podemos validar einput usando orequired atributo. Isso adicionará um asterisco ao lado do rótulo, indicando que este campo deve ser preenchido. A entrada fica verde/vermelha dependendo se a validação passa ou falha.

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

    Vinculação de dados

    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 oNgModel:

    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çarfocus os elementos de entrada usando aigxFocus diretiva.

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

    Para usar aigxFocus diretiva, você precisa importar oIgxFocusModule.

    Se você quiser que o texto em um elemento de entrada, marcado comigxInput, seja selecionado no foco, você precisa ativar aigxTextSelection diretiva.

    <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 aigxTextSelection diretiva, você precisa importar oIgxTextSelectionModule.

    Grupo de Entrada

    O componente Ignite UI for Angular Grupo de Entrada ajuda desenvolvedores a criar formas de fácil uso e estéticas. Para mais informações, você pode ler a documentação do Grupo de Entrada.

    API References

    Additional Resources

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.