0

Existe alguna forma de pasar las validaciones que se hacen en los campos de un formulario reactivo (en el .html) al archivo del componente (.ts). Para que el template quede limpio y sin la logica.

Por ejemplo, tengo un formulario con la siguiente logica

<div class="form-group">
            <label for="correo">Correo</label>
            <input formControlName="correo" type="text" class="form-control" id="correo"  placeholder="Ingrese su correo">
            <small id="nombreHelp" class="form-text text-muted">No mostraremos tu correo.</small>
          </div>
    <div class="errorCodigo" 
          *ngIf="formulario.controls.correo.touched &&
          formulario.controls.correo.hasError('pattern')">
            El formato del correo no es valido
    </div>
    <div class="errorCodigo" 
      *ngIf="formulario.controls.correo.touched &&
      formulario.controls.correo.hasError('required')">
        El campo es requerido
    </div>

¿Como puedo mover las validaciones que se muestran con el ngIf al componente, para que sea el que retorne el error correspondiente?

2 respuestas 2

1

Encontre la siguiete forma

1) En el componente (archivo .ts) declaro un array json con los mensajes de errores, por ejemplo:

  private mensajesErrores: any = {
'razonSocial' : {
  'minLength' : 'El nombre no debe tener menos de 3 caracteres',
  'maxLength' : 'El nombre no debe tener mas de 10 caracteres',
  'required'  : 'Campo obligatorio'
},
'fechaInicioActividad' : {
  'required'  : 'Campo obligatorio'
},
'email' : {
  'required'  : 'Campo obligatorio',
  'maxLength' : 'El correo no debe tener mas de 10 caracteres',
  'email'     : 'El formato del correo no es correcto',
}
  };

Las propiedades 'minLenght','required' y demas son las validaciones que declaro con el formulario. Ver el siguiente codigo

this.formGroup = this.formBuilder.group({
  razonSocial: 
      ['',
          [
            Validators.minLength(3),
            Validators.maxLength(10),
            Validators.required
          ]
      ],
  fechaInicioActividad: 
      ['',
        [
          Validators.required,
        ]
      ],
  email: 
      ['',
          [
            Validators.required,
            Validators.maxLength(100),
            Validators.email
          ]
      ]
});

2) Crear una funcion auxiliar que reciba el nombre del input(por ejemplo 'razonSocial'):

public getError(controlName: string): string {
// retorna los datos ingresados en el form
// console.log( this.formGroup.value);
// 
let error = '';
const control = this.formGroup.get(controlName);
if (control.touched && control.errors) {

  // la variable 'control.errors' nos devuelve un par del tipo '{"required":true}' 
  let key = Object.keys(control.errors)[0];
  let value = Object.values(control.errors)[0];
  // console.log(this.mensajesErrores[controlName][key]);
  error = this.mensajesErrores[controlName][key];
}
return error;
}

La funcion recibe el nombre del input y consulta, si fue tocado y tiene error, busca en el array de json (el del paso 1) para retornar el mensaje de error correspondiente.

3) En el archivo html, hacemos una llamada de la siguiente forma:

<span>{{ getError('fechaInicioActividad')}}</span>

Esto nos permitira mostrar los mensajes personalizados que definimos de los errores.

Edit

Si estas trabajando en angular material, en el html debes mostrar los errores como

    <mat-error>
      {{ getError('razonSocial')}}
    </mat-error>
0
maxLength cambiar por maxlength
minLength cambiar por minlength

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.