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

    The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an igx-input-group component.

    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';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package


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

    Alternatively, as of 16.0.0 you can import the IgxLabelDirective, IgxInputDirective, and IgxInputGroupComponent as standalone dependencies, or use the IGX_INPUT_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

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

    Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the igxLabel and igxInput directives and the igx-input-group component.

    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.

    To use the igxInput and igxLabel, you have to wrap them in an <igx-input-group> container:

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

    The igxInput directive could be applied to <input> and <textarea> HTML elements, in both single-line and multi-line text fields.

    Validação

    We can validate an input using the required attribute. This will add an asterisk next to the label, indicating that this field must be completed. The input will turn green/red depending on whether the validation passes/fails.

    <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

    The Ignite UI for Angular Input directive supports both one-way and two-way data-binding. The following code illustrates how to add a two-way data-binding using the 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

    You can add logic to force focus on input elements using the igxFocus directive.

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

    To use the igxFocus directive, you have to import the IgxFocusModule.

    If you want the text in an input element, marked with igxInput, to be selected on focus, you have to enable the igxTextSelection directive.

    <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

    To use the igxTextSelection directive, you have to import the IgxTextSelectionModule.

    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.