| title | Input Groups Component - Native Angular | Ignite UI for Angular |
|---|---|
| description | The Input Groups component in Ignite UI for Angular allows for easy-to-use and aesthetic forms, simplicity with inputting data, and provides mitigation for handling validation and errors. |
| keywords | Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Label components, Angular Label controls, Angular Input components, Angular Input controls, Input component, Input control, Label component, Label control, Angular Input Group components, Angular Input Group controls, Angular Input directive, Angular Label directive, Angular Forms, Angular Reactive Forms, Angular Form Validation |
| _language | kr |
Input groups in the Ignite UI for Angular controls allow developers to create easy-to-use and aesthetic forms. The user experiences simplicity with inputting data, and the inputs also provide mitigation for handling validation and errors.
The default styling of the Input Group component as well as its complimentary directives follow the text fields specification in the Material Design guidelines.
To get started import all modules for Ignite UI components and the FormsModule in order to have working Template Driven Form:
// app.module.ts
...
import { IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule } from "igniteui-angular";
import { FormsModule } from "@angular/forms";
@NgModule({
...
imports: [..., IgxIconModule, IgxInputGroupModule, IgxButtonModule, IgxRippleModule, IgxDatePickerModule, IgxTimePickerModule, IgxComboModule, igxSelectModule, FormsModule],
...
})
export class AppModule {}Note
To use any of the directives igxInput, igxLabel, igx-prefix, igx-suffix or igx-hint, you have to wrap them in an <igx-input-group> container.
You can read about the igxLabel and igxInput directives as well as their validation, data binding and API in a separate topic here.
If you want to have an input prefix or suffix, you can use Ignite UI for Angular Prefix or Suffix. Both directives can contain html elements, strings, icons or even other components. Let's add a new input field with string prefix (+359) and igx-icon suffix (<igx-icon>phone</igx-icon>):
<igx-input-group>
<igx-prefix>+359</igx-prefix>
<label igxLabel for="phone">Phone</label>
<input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
<igx-suffix>
<igx-icon>phone</igx-icon>
</igx-suffix>
</igx-input-group>Here is how the sample looks:
Ignite UI for Angular Hint provides a helper text placed below the input. The hint can be placed at the start or at the end of the input. The position of the igx-hint can be set using the position property. Let's add a hint to our phone input:
<igx-input-group>
<igx-prefix>+359</igx-prefix>
<label igxLabel for="phone">Phone</label>
<input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
<igx-suffix>
<igx-icon>phone</igx-icon>
</igx-suffix>
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>This is how the phone field with hint looks:
Our inputs could be styled differently by using the type property of the igxInputGroup component. Currently we support four different ways of styling: line (the default one), box, border and search. This is how they look:
- IgxHintDirective
- IgxInputDirective
- IgxInputGroupComponent
- IgxInputGroupComponent Styles
Related topics:
Our community is active and always welcoming to new ideas.