É um componente composto por elementos <ion-input> com funções de cadastros, sendo eles: Usuário.
Para sua utilização, é necessário a importação do componente
npm install componente
declarar no módulo desejado
imports: [CreateFormModule]
inicialização do mesmo napágina desejada
constructor(public formUsername: FormUsername) {}
e a relização da chamada no arquivo de visão
<form-username [username]="this.username" (usernameReturn)="this.setUsername($event)"></form-username>.
Os parâmetros podem ser informados para garantir a personalização no nível desejado. Sendo os parâmetros:
| Tag | Descrição | Default | Tipo | Retorno |
|---|---|---|---|---|
| required | Configura o campo como obrigatório | true | boolean | - |
| maxLength | Define a quantidade máxima de caractéres | 25 | number | - |
| minLength | Define a quantidade mínima de caractéres | 5 | number | - |
| pattern | Define o padrão que será validado | ^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$ |
string(REGEX) | - |
| username | Variável que será preenchida | - | String | - |
| styleDivInputText | Estilo do campo de texto | { "display": "flex" , "align-items": "center", "margin-top": "5px", "padding": "0", "background": "var(--ion-color-primary)", "border-radius": "0.5em"} |
string (JSON) | - |
| styleUserIcon | Estilo do campo do ícone | { "color": "var(--ion-color-primary-contrast)", "float": "left", "font-size": "20px", "margin-left": "3px" } |
string (JSON) | - |
| styleInputText | Estilo do texto | { "color": "var(--ion-color-primary-contrast)" } |
string (JSON) | - |
| styleDivErrors | Estilo da div contendo as mensagens de erro | {"display": "flex", "flex-direction":"column", "justify-content": "center", "align-items": "center" } |
string (JSON) | - |
| styleDivErrorMessage | Estilo das mensagens de erro | {"font-size": "0.9em", "margin-top": "3px", "color": "var(--ion-color-danger)" } |
string (JSON) | - |
| errMsgRequired | Mensagem de erro para usuário obrigatório | Username is required |
string | - |
| errMsgMinlength | Mensagem de erro para quantidade mínima de caractéres | Username must be at least 5 characters long. |
string | - |
| errMsgMaxlength | Mensagem de erro para quantidade máxima de cararactéres | Username cannot be more than 25 characters long |
string | - |
| errMsgpattern | Mensagem de erro exibida para informar o padrão do usuário | Your username must contain only numbers and letters |
string | - |
| errMsgValidUsername | Mensagem de erro para usuário inválido | Your username has already been taken |
string | - |
| usernameReturn | Método callback para retornar o valor da entrada e se está válido ou não | Método Callback | { username : String ;valid : Boolean;} |