@codice-progressio/input-validaciones
v16.0.0
Published
Validaciones básicas para reacives forms
Downloads
12
Maintainers
Readme
Input Validaciones
Mensajes de validaciones rápidos para reactive forms. Por el momento solo en español.
Requiere los estilos de bootstrap 4 o 5 para funcionar y para los iconos utiliza fontawesome. Especificamente, utiliza la estructura y las clases de validación de bootstrap para señalar el error.
Instalación
npm i @codice-progressio/input-validaciones
Uso
Agrega InputValidacionesModule
en los modulos que requieras validaciones.
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
InputValidacionesModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Llama el componente debajo del input que tenga asinado el formControlName
(para mantener un orden y estilos css)
<!--
=====================================
nombre
=====================================
-->
<div class="col-12">
<div class="form-group">
<input
[ngClass]="{
'is-invalid': vs.invalid(f('nombre')),
'is-valid': vs.valid(f('nombre'))
}"
type="text"
class="form-control font-20 font-weight-bolder"
formControlName="nombre"
/>
<small id="helpId" class="form-text text-muted">Nombre proveedor</small>
<codice-validaciones [campo]="f('nombre')"></codice-validaciones>
</div>
</div>
<!--
=====================================
END nombre
=====================================
-->
La funcion
f('campo')
es un helper para obtener el campo desde el formulario. Su implementación es sumamente sencilla.f(c:string):FormControl{ return this.formulario.get(c) }
Herramientas
Estos son algúnos snipets que ayudan en la creación de los formularios con una estructura compatible con la validación y boostrap. [Visual Studio Code]
Crea un input (Este se puede cambiar por un textarea)
"Insertar input": {
"prefix": "input-validacion",
"body": [
"<!-- ",
"=====================================",
" $1",
"=====================================",
"-->",
"<div class='col-${6:6}'>",
" <div class=\"form-group\">",
" <input",
" [ngClass]=\"{",
" 'is-invalid': vs.invalid(f('${1:cannombreDelCampotidad}')),",
" 'is-valid': vs.valid(f('${1:nombreDelCampo}'))",
" }\"",
" type=\"${2:text}\"",
" class=\"form-control\"",
" formControlName=\"${1:nombreDelCampo}\"",
" />",
" <small id=\"helpId\" class=\"form-text text-muted\">${5:Descripcion del input}</small>",
" <codice-validaciones",
" [campo]=\"f('${1:nombreDelCampo}')\"",
" ${4:[directo]=\"${3:true}\"}",
" ></codice-validaciones>",
"</div>",
"</div>",
"<!-- ",
"=====================================",
" END $1",
"=====================================",
"-->"
],
"description": "Input con validacion."
},
Crea un input de tipo checkbox
"Insertar input checkbox": {
"prefix": "input-validacion-checkbox",
"body": [
"<!-- ",
"=====================================",
" $1",
"=====================================",
"-->",
"<div class='col-${6:6}'>",
" <div class=\"form-check\">",
" <label class=\"form-check-label\">",
" <input",
" type=\"${2:checkbox}\"",
" class=\"form-check-input\"",
" formControlName=\"${1:nombreDelCampo}\"",
" />",
"${5:Descripcion del input}",
" </label>",
"</div>",
"</div>",
"<!-- ",
"=====================================",
" END $1",
"=====================================",
"-->"
],
"description": "Input con validacion."
},
Genera un input para trabajar con FormArray
"Insertar input array": {
"prefix": "input-validacion-array",
"body": [
"<!-- ",
"=====================================",
" $2",
"=====================================",
"-->",
"<div class='col-${7:6}'>",
" <div class=\"form-group\">",
" <input",
" [ngClass]=\"{",
" 'is-invalid': vs.invalid(${8:dummy}.get('${2:nombreDelCampo}')),",
" 'is-valid': vs.valid(${8:dummy}.get('${2:nombreDelCampo}'))",
" }\"",
" type=\"${3:text}\"",
" class=\"form-control\"",
" formControlName=\"${2:nombreDelCampo}\"",
" />",
" <small id=\"helpId\" class=\"form-text text-muted\">${6:Descripcion del input}</small>",
" <codice-validaciones",
" [campo]=\"${8:dummy}.get('${2:nombreDelCampo}')\"",
" ${5:[directo]=\"${4:true}\"}",
" ></codice-validaciones>",
"</div>",
"</div>",
"<!-- ",
"=====================================",
" END $2",
"=====================================",
"-->"
],
"description": "Input con validacion."
},
Genera un input para trabajar con FormArray simples que no sean objetos, esto es, arreglos de tipo string, numericos, etc.
"Insertar input array sub simple": {
"prefix": "input-validacion-array-sub-simple",
"body": [
"<!-- ",
"=====================================",
" $2",
"=====================================",
"-->",
"<div class='col-${7:6}'>",
" <div class=\"form-group\">",
" <input",
" [ngClass]=\"{",
" 'is-invalid': vs.invalid(${8:dummy}),",
" 'is-valid': vs.valid(${8:dummy})",
" }\"",
" type=\"${3:text}\"",
" class=\"form-control\"",
" [formControl]=\"${8:dummy}\"",
" />",
" <small id=\"helpId\" class=\"form-text text-muted\">${6:Descripcion del input}</small>",
" <codice-validaciones",
" [campo]=\"${8:dummy}\"",
" ${5:[directo]=\"${4:true}\"}",
" ></codice-validaciones>",
"</div>",
"</div>",
"<!-- ",
"=====================================",
" END $2",
"=====================================",
"-->"
],
"description": "Input con validacion para array con un solo campo"
},
Genera la estructura necesaria para desplegar un arreglo de objetos.
"Insertar_estructura_de_array": {
"prefix": "form-array",
"body": [
"<!-- ",
"=====================================",
" Array $1 ",
"=====================================",
"-->",
"<ng-container formArrayName=\"${1:array}\">",
"<ng-container *ngFor=\"let dummy of fa('${1:array}').controls; let i = index\">",
"<ng-container [formGroupName]=\"i\">",
"$2",
"</ng-container>",
"</ng-container>",
"</ng-container>",
"<!-- ",
"=====================================",
" END Array $1 ",
"=====================================",
"-->"
],
"description": "Form array plantilla"
},
Dentro de un formArray, generar una subestructura de array. Este es cuando ya se pusieron complicadas las cosas con los arreglos.
"Insertar\_ sub_estructura_de_array": {
"prefix": "form-array-sub",
"body": [
"<!-- ",
"=====================================",
" Array $1 ",
"=====================================",
"-->",
"<ng-container formArrayName=\"${1:array}\">",
"<ng-container *ngFor=\"let ${2:dummy2} of dfa(${3:dummy}, '${1}').controls; let ${4:i} = index\">",
"<ng-container [formGroupName]=\"${4:i}\">",
"$1000",
"</ng-container>",
"</ng-container>",
"</ng-container>",
"<!-- ",
"=====================================",
" END Array $1 ",
"=====================================",
"-->"
],
"description": "Form array plantilla"
}