Visão geral do componente Angular Input Group
EleIgxInputGroupComponent permite ao usuário aprimorar elementos de entrada como input, select, textarea, etc. Isso pode ser alcançado adicionando conteúdo personalizado como texto, ícones, botões, validação personalizada, rótulo flutuante, etc., de cada lado deles, como 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 issoIgxInputGroupModule no seu arquivo app.module.ts.
Note que tambémIgxInputGroupComponent depende do Angular FormsModule para ter um Formulário Orientado por Template 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 {}
Alternativamente,16.0.0 você pode importarIgxInputGroupComponent como uma dependência independente 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, 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 ou diretivas do Grupo de Entrada Ignite UI for Angular, pode começar a usar oigx-input-group componente.
Observação
Para usar qualquer uma das diretrizesigxInput,igxLabeligx-prefixigx-suffix ouigx-hint, você precisa envolvê-las em um<igx-input-group> recipiente.
Using the Angular Input Group
Label & Input
You can read about the igxLabel and igxInput directives as well as their validation, data binding and API in a separate topic here.
Prefix & Suffix
Asigx-prefix diretivas origxPrefix andigx-suffixigxSuffix ou podem conter ou ser anexadas a elementos HTML, strings, ícones ou até 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
Aigx-hint diretiva fornece um texto auxiliar colocado abaixo da entrada. Pode estar no início ou no final da entrada, dependendo do valor daposition propriedade. Vamos adicionar uma dica ao nosso input por telefone:
<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 dos grupos de entrada podem ser alterados usando atype propriedade doigxInputGroup componente. O componente do grupo de entrada suporta os seguintes tipos:line (padrão se o tipo não for especificado),border,box, esearch. Osline tiposborderbox e são feitos especificamente para osMaterial Design temas. Definir esses tipos com outros temas não terá efeito em como o grupo de entrada fica. Um exemplo de definir 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' }]
Observação
Atype propriedade tem precedência sobre um IGX_INPUT_GROUP_TYPE, portanto um valor de token pode ser sobrescrito em nível de componente se a propriedade de tipo for definida explicitamente. A maioria dosigniteui-angular controles de formulário usa componentes de grupo de entrada internamente, ou permite um template personalizado. Definir um token global também afetará esses componentes.
Ignite UI for Angular também fornece estilização para a entrada detype="file" e suporta todos os tipos e temas de grupos de entrada, basta adicionar isso ao seu template:
<igx-input-group>
<input igxInput type="file" multiple />
</igx-input-group>
Input Group Theme
O componente de grupo de entrada suporta vários temas -material,fluent,bootstrap, eindigo-design; Otheme é definido automaticamente durante a inicialização dos componentes e é inferido a partir da folha de estilo atualmente utilizada. Se você planeja suportar vários temas na sua aplicação com troca de tempo de execução, pode definir explicitamente o tema usando atheme propriedade Input.
<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ários baseada em templates é alcançada adicionando atributos de validação, ou seja,required etcminlength., aoinput elemento.
<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>
Orequired atributo adiciona um asterisco ao lado do rótulo, indicando que esse campo deve ser preenchido. Além disso, quandoinput a validação adicional é aplicada, comoemail eminlength, isso pode permitir que o desenvolvedor notifique o usuário final para requisitos adicionais via diretivaigx-hint.
O exemplo a seguir utiliza vinculação de dados bidirecional e demonstra como inspecionar o estado do controle exportando parangModel 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 parangForm 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 na amostra abaixo. Comece a digitar nos campos E-mail e Senha e você vai notar que apareceigx-hint se os valores digitados forem inválidos. O exemplo também demonstra como alternar a visibilidade da senha usando aigx-iconigx-suffix diretiva e .
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 orientado por template, ao ter validação adicional comoemail andminlength, umaigx-hint diretiva pode ser usada para notificar o usuário final caso a validação tenha falhado.
O exemplo a seguir demonstra como acessar o controle por meio de umget método e inspecionar seu estado. Também demonstra como ativar/desativar o botão de enviar inspecionando o estado doFormGroup.
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 na amostra abaixo. Semelhante ao exemplo de formulário baseado em templates, ele também demonstra como alternar a visibilidade da senha usando aigx-iconigx-suffix diretiva e .
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, oFormGroup. O validador recupera os controles filhos chamando o método theFormGroupget, compara os valores e, se a validação falhar, um conjunto de erros é gerado para oFormGroup.
Isso deixará apenas o estado do formulário como inválido. Para definir o estado do controle, poderíamos usar osetErrors método e adicionar manualmente os erros gerados. Então, quando a validação for bem-sucedida, os erros podem ser removidos usando osetValue método que irá 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 aoFormGroup formulário, 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 embutidos poderiam ser usados em combinação com o customizadoemailValidator e cross-fieldpasswordValidator dos exemplos anteriores.
Estilização
A primeira coisa que precisamos fazer, para começar com o estilo do grupo de entrada, é incluir oindex arquivo no 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';
Para personalizar a aparência dos grupos de entrada, você pode criar um novo tema estendendo oinput-group-theme. Essa abordagem permite que você substitua apenas os parâmetros que deseja alterar, enquanto o restante é automaticamente tratado pelo tema base.
Mesmo especificando apenas alguns parâmetros principais, como cores para a borda ou plano de fundo, você obterá um grupo de entrada totalmente estilizado com estilos consistentes baseados em estado (foco, foco, etc.) aplicados a você.
Aqui está um exemplo simples:
$custom-input-group: input-group-theme(
$box-background: #57a5cd,
$border-color: #57a5cd,
);
O último passo é incluir o tema recém-criado:
@include css-vars($custom-input-group);
Demo
Observação
Se sua página inclui vários tipos de grupos de entrada — comobox,border,line, ousearch— é melhor definir suas variáveis de tema para o tipo específico de grupo de entrada.
Por exemplo:
Use.igx-input-group--box ao estilizar entradas no estilo caixa. Use.igx-input-group--search ao direcionar entradas de busca. Isso ajuda a evitar conflitos de estilo entre diferentes tipos de entrada. Por exemplo, definir um escuro$box-background globalmente pode fazer com que as bordas das entradas de borda ou linha fiquem invisíveis (geralmente parecendo brancas).
Referências de API
- Diretiva de entrada Igx
- IgxHintDirectiva
- Tipos de IgxInputGroup
- Componente do grupo de entrada Igx
- Estilos de IgxInputGroupComponent
Theming Dependencies
Recursos adicionais
Tópicos relacionados:
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub