Visão geral do componente Angular Input Group
O IgxInputGroupComponent permite que o usuário aprimore elementos de entrada como input, select, textarea, etc. Isso pode ser obtido adicionando conteúdo personalizado como texto, ícones, botões, validação personalizada, rótulo flutuante, etc., em ambos os lados deles, como um prefixo, sufixo ou dica.
Angular Input Group Example
Getting Started with Ignite UI for Angular Input Group
Para começar a usar o componente Ignite UI for Angular Input Group, 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.
Observe que o IgxInputGroupComponent também depende do Angular FormsModule para ter um formulário orientado a modelo funcional:
// 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 o IgxInputGroupComponent como uma dependência autônoma 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, IgxIconComponent } from 'igniteui-angular';
// import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-input-group>
<igx-prefix>+359</igx-prefix>
<label igxLabel for="phone">Phone</label>
<input igxInput [(ngModel)]="value" name="phone" type="tel" maxlength="9" />
<igx-icon igxSuffix>phone</igx-icon>
</igx-input-group>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent, FormsModule]
/* or imports: [IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective, FormsModule] */
})
export class HomeComponent {
public value = '123456789';
}
Agora que você importou o módulo Ignite UI for Angular Input Group ou as diretivas, você pode começar a usar o componente igx-input-group.
Note
Para usar qualquer uma das diretivas igxInput, igxLabel, igx-prefix, igx-suffix ou igx-hint, você precisa envolvê-las em um contêiner <igx-input-group>.
Using the Angular Input Group
Label & Input
Você pode ler sobre as diretivas igxLabel e igxInput, bem como sua validação, vinculação de dados e API em um tópico separado aqui.
Prefix & Suffix
As diretivas igx-prefix ou igxPrefix e igx-suffix ou igxSuffix podem conter ou ser anexadas a elementos HTML, strings, ícones ou até mesmo outros componentes. No exemplo a seguir, criaremos um novo campo de entrada com um prefixo de string e um sufixo de ícone:
<igx-input-group>
<igx-prefix>+359</igx-prefix>
<label igxLabel for="phone">Phone</label>
<input igxInput name="phone" type="tel" maxlength="9" />
<igx-icon igxSuffix>phone</igx-icon>
</igx-input-group>
Hints
A diretiva igx-hint fornece um texto auxiliar colocado abaixo da entrada. Pode estar no início ou no fim da entrada, dependendo do valor da propriedade position. Vamos adicionar uma dica à nossa entrada phone:
<igx-input-group>
<igx-prefix>+359</igx-prefix>
<label igxLabel for="phone">Phone</label>
<input igxInput name="phone" type="tel" />
<igx-suffix>
<igx-icon>phone</igx-icon>
</igx-suffix>
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
</igx-input-group>
É assim que o campo de telefone com dica se parece:
Input Types & Input Group Type Token
Os estilos do grupo de entrada podem ser alterados usando a propriedade type do componente igxInputGroup. O componente do grupo de entrada suporta os seguintes tipos: line (padrão se type não for especificado), border, box e search. Os tipos line, border e box são feitos especificamente para os temas Material Design. Definir esses tipos com outros temas não terá nenhum efeito na aparência do grupo de entrada. Um exemplo de configuração de um tipo específico declarativamente:
<igx-input-group type="border">
Usar o token de injeção IGX_input-group_TYPE permite especificar um tipo em um nível de aplicativo para todas as instâncias de input-group. Ele fornece uma maneira fácil de estilizar todos os componentes relacionados de uma vez. Para definir o tipo, use o token de injeção IGX_input-group_TYPE para criar um provedor DI.
providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }]
Note
A propriedade type tem precedência sobre um IGX_INPUT_GROUP_TYPE, portanto, um valor de token pode ser substituído em um nível de componente se a propriedade type for definida explicitamente. A maioria dos controles de formulário igniteui-angular usa o componente input-group internamente ou permite um modelo personalizado. Definir um token global afetará esses componentes também.
Ignite UI for Angular também fornece estilo para a entrada do type="file" e suporta todos os tipos de grupos de entrada e temas, basta adicionar isto ao seu modelo:
<igx-input-group>
<input igxInput type="file" multiple />
</igx-input-group>
Input Group Theme
O componente do grupo de entrada suporta vários temas -material, fluent, bootstrap e indigo-design; O theme é definido automaticamente durante a inicialização do componente e é inferido da folha de estilo usada no momento. Se você planeja suportar vários temas em seu aplicativo com alternância de tempo de execução, você pode definir explicitamente o tema usando a propriedade de entrada theme.
<igx-input-group theme="fluent">...</igx-input-group>
Typed Forms
O componente Ignite UI for Angular Input Group pode ser usado dentro de formulários reativos estritamente tipados, que são os padrões do Angular 14. Para saber mais sobre os formulários tipados, você pode verificar a documentação oficial Angular.
Validação
Os exemplos a seguir demonstram como configurar a validação de entrada ao usar formulários reativos ou baseados em modelo.
Template-Driven Forms
A validação de formulário orientada por modelo é obtida adicionando atributos de validação, ou seja, required, minlength, etc., ao elemento input.
<form>
<igx-input-group>
<label igxLabel for="username">Username</label>
<input igxInput name="username" type="text" required />
</igx-input-group>
<igx-input-group>
<label igxLabel for="email">Email</label>
<input igxInput name="email" type="email" required email />
</igx-input-group>
<igx-input-group>
<label igxLabel for="password">Password</label>
<input igxInput name="password" type="password" required minlength="8" />
</igx-input-group>
<button igxButton="contained" igxRipple type="submit">Submit</button>
</form>
O atributo required adiciona um asterisco ao lado do rótulo, indicando que esse campo deve ser preenchido. Além disso, quando a input tem validação adicional aplicada a ela, como email e minlength, isso pode permitir que o desenvolvedor notifique o usuário final sobre requisitos adicionais por meio da diretiva igx-hint.
O exemplo a seguir usa vinculação de dados bidirecional e demonstra como inspecionar o estado do controle exportando o ngModel para uma variável local.
<form #login="ngForm">
...
<igx-input-group>
<label igxLabel for="email">Email</label>
<input igxInput name="email" type="email" [(ngModel)]="user.email" #email="ngModel" required email />
<igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
</igx-input-group>
<igx-input-group>
<label igxLabel for="password">Password</label>
<input igxInput name="password" type="password"
[(ngModel)]="user.password" #password="ngModel" required minlength="8" />
<igx-hint *ngIf="password.errors?.minlength">Password should be at least 8 characters</igx-hint>
</igx-input-group>
<button igxButton="contained" igxRipple type="submit">Submit</button>
</form>
O usuário não deve conseguir enviar o formulário se algum dos controles de formulário nele for inválido. Isso pode ser feito habilitando/desabilitando o botão de envio com base no estado do formulário.
O exemplo a seguir demonstra como inspecionar o estado do formulário exportando o ngForm para uma variável local.
<form #registrationForm="ngForm">
<igx-input-group>
<label igxLabel for="email">Email</label>
<input igxInput name="email" type="email" [(ngModel)]="user.email" #email="ngModel" required email />
<igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
</igx-input-group>
...
<button igxButton="contained" igxRipple type="submit" [disabled]="!registrationForm.valid">Submit</button>
</form>
O resultado das configurações acima pode ser visto no exemplo abaixo. Comece a digitar nos campos Email e Password e você notará que o igx-hint é exibido se os valores inseridos forem inválidos. O exemplo também demonstra como alternar a visibilidade da senha usando o igx-icon e a diretiva igx-suffix.
Reactive Forms
A validação reativa de formulário é obtida adicionando funções validadoras diretamente ao modelo de controle de formulário na classe de componente. Após criar o controle na classe de componente, ele deve ser associado a um elemento de controle de formulário no modelo.
public registrationForm: FormGroup<User>;
constructor(fb: FormBuilder) {
this.registrationForm = fb.group({
username: ['', { nonNullable: true, validators: [Validators.required] }],
email: ['', { nonNullable: true, validators: [Validators.required, Validators.email] }],
password: ['', { nonNullable: true, validators: [Validators.required, Validators.minLength(8)] }]
});
}
<form [formGroup]="registrationForm">
<igx-input-group>
<label igxLabel for="username">Username</label>
<input igxInput name="username" type="text" formControlName="username" />
</igx-input-group>
<igx-input-group>
<label igxLabel for="email">Email</label>
<input igxInput name="email" type="email" formControlName="email" />
</igx-input-group>
<igx-input-group>
<label igxLabel for="password">Password</label>
<input igxInput name="password" type="password" formControlName="password" />
</igx-input-group>
<button igxButton="contained" igxRipple type="submit">Submit</button>
</form>
Semelhante ao exemplo de formulário baseado em modelo, ao ter validação adicional como email e minlength, uma diretiva igx-hint pode ser usada para notificar o usuário final se a validação falhar.
O exemplo a seguir demonstra como acessar o controle por meio de um método get e inspecionar seu estado. Ele também demonstra como habilitar/desabilitar o botão submit inspecionando o estado do FormGroup.
public get email() {
return this.registrationForm.get('email');
}
public get password() {
return this.registrationForm.get('password');
}
<form [formGroup]="registrationForm">
...
<igx-input-group>
<label igxLabel for="email">Email</label>
<input igxInput name="email" type="email" formControlName="email" />
<igx-hint *ngIf="email.errors?.email">Please enter a valid email</igx-hint>
</igx-input-group>
<igx-input-group>
<label igxLabel for="password">Password</label>
<input igxInput name="password" type="password" formControlName="password" />
<igx-hint *ngIf="password.errors?.minlength">Password should be at least 8 characters</igx-hint>
</igx-input-group>
<button igxButton="contained" igxRipple type="submit" [disabled]="!registrationForm.valid">Submit</button>
</form>
O resultado das configurações acima pode ser visto no exemplo abaixo. Semelhante ao exemplo de formulário orientado a modelo, ele também demonstra como alternar a visibilidade da senha usando o igx-icon e a diretiva igx-suffix.
Custom Validators
Alguns campos de entrada podem exigir validação personalizada e isso pode ser obtido por meio de validadores personalizados. Quando o valor é inválido, o validador gerará um conjunto de erros que podem ser usados para exibir uma mensagem de erro específica.
Abaixo está um exemplo de um validador de formulário reativo personalizado simples que valida se o endereço de e-mail inserido contém um valor predefinido e gera erros diferentes com base em onde o valor ocorre.
public registrationForm: FormGroup<User>;
constructor(fb: FormBuilder) {
this.registrationForm = fb.group({
email: ['', {
nonNullable: true,
validators: [
Validators.required,
Validators.email,
this.emailValidator('infragistics')
]
}],
...
});
}
private emailValidator(val: string): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const value = control.value?.toLowerCase();
const localPartRegex = new RegExp(`(?<=(${val})).*[@]`);
const domainRegex = new RegExp(`(?<=[@])(?=.*(${val}))`);
const returnObj: ValidatorErrors = {};
if (value && localPartRegex.test(value)) {
returnObj.localPart = true;
}
if (value && domainRegex.test(value)) {
returnObj.domain = true;
}
return returnObj;
}
}
Cross-Field Validation
Em alguns cenários, a validação de um controle pode depender do valor de outro. Para avaliar ambos os controles em um único validador personalizado, a validação deve ser realizada em um controle ancestral comum, ou seja, o FormGroup. O validador recupera os controles filhos chamando o método get do FormGroup, compara os valores e, se a validação falhar, um conjunto de erros é gerado para o FormGroup.
Isso definirá apenas o estado do formulário como inválido. Para definir o estado do controle, poderíamos usar o método setErrors e adicionar os erros gerados manualmente. Então, quando a validação for bem-sucedida, os erros poderão ser removidos usando o método setValue que executará novamente a validação do controle para o valor fornecido.
O exemplo abaixo demonstra uma validação entre campos onde a Senha não deve conter o Endereço de e-mail e a Repetir senha deve corresponder à Senha.
private passwordValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const email = control.get('email');
const password = control.get('password');
const repeatPassword = control.get('repeatPassword');
const returnObj: ValidatorErrors = {};
if (email.value
&& password.value
&& password.value.toLowerCase().includes(email.value)) {
password.setErrors({ ...password.errors, containsEmail: true });
returnObj.containsEmail = true;
}
if (password
&& repeatPassword
&& password.value !== repeatPassword.value) {
repeatPassword.setErrors({ ...repeatPassword.errors, mismatch: true });
returnObj.mismatch = true;
}
if (!returnObj.containsEmail && password.errors?.containsEmail) {
password.setValue(password.value);
}
if (!returnObj.mismatch && repeatPassword.errors?.mismatch) {
repeatPassword.setValue(repeatPassword.value);
}
return returnObj;
}
}
Para adicionar o validador personalizado ao FormGroup ele deve ser passado como um segundo argumento ao criar o formulário.
public registrationForm: FormGroup<User>;
constructor(fb: FormBuilder) {
this.registrationForm = fb.group({
email: ['', {
nonNullable: true,
validators: [
Validators.required,
Validators.email,
this.emailValidator('infragistics')
]
}],
...
},
{
validators: [this.passwordValidator()]
});
}
O exemplo abaixo demonstra como os validadores integrados podem ser usados em combinação com o emailValidator personalizado e passwordValidator de campo cruzado dos exemplos anteriores.
Estilização
A primeira coisa que precisamos fazer para começar a estilizar o grupo de entrada é incluir o arquivo index em nosso arquivo de estilo:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Em seguida, temos que criar um novo tema que estenda o input-group-theme e passar os parâmetros que gostaríamos de alterar:
$custom-input-group: input-group-theme(
$filled-text-color: #288a54,
$focused-text-color: #174f30,
$idle-text-color: #288a54,
$idle-bottom-line-color: #288a54,
$interim-bottom-line-color: #288a54,
$hover-bottom-line-color: #288a54,
$focused-secondary-color: #174f30,
$box-background: #eeeeee
);
O último passo é incluir o tema recém-criado:
@include css-vars($custom-input-group);
Demo
API References
- Diretiva de entrada Igx
- IgxHintDirectiva
- Tipos de IgxInputGroup
- Componente do grupo de entrada Igx
- Estilos de IgxInputGroupComponent
Theming Dependencies
Additional Resources
Tópicos relacionados:
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub