0

sigo con los formularios y le voy pillando el truquillo, me quedo con los formsGroup porque me parecen el que mejor encapsula y modulariza para lo que estoy llevando a cabo. Dicho esto, estoy creando validaciones para mi formgroup que estan en la clase Validator y tambien otras que he customizado.

Aqui os dejo mi controlador del formulario de registro:

import {Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
})

export class RegisterComponent implements OnInit {

  registerForm: FormGroup;


  constructor(
    public fb:FormBuilder
  ) {
      this.registerForm = this.fb.group({
        name:['',[Validators.required]],
        email:['',[Validators.required,Validators.email,Validators.pattern('"^[a-z0-9._%+-]+@[a-z0-9.-]+\\\\.[a-z]{2,4}$"')]],
        password:['',[Validators.required]],
        repeat_password:['',[Validators.required]],
      },{
        validators:[this.checkPasswords,this.checkNameAndEmailMustBeEquals]
      });
  }

  ngOnInit(): void {
  }

  register() {
    // console.log(this.registerForm.value);
    // console.log(this.registerForm.controls);
    console.log(this.registerForm);
  }

  /**
   * CUSTOM VALIDATIONS
   */

  checkPasswords(form: FormGroup){
    const password = form.get('password').value;
    const repeatPassword = form.get('repeat_password').value;

    return password === repeatPassword ? null: {notSame:true};
  }

  checkNameAndEmailMustBeEquals(form:FormGroup){
      const name = form.get('name').value;
      const email = form.get('email').value;

      let strEmail = email.substring(0, email.lastIndexOf("@"));;

      return strEmail === name ? null : {notSame:true};
  }

}

Pero ahora quiero resolver el siguiente problema, como intension es desacoplar de la vista casi todas las directivas ngIf y eso par alas validaciones ya no quiero tener que decir en ellas :

Si el campo name es requerido y no esta escrito (despues de haber pinchado en el) hardcodeo el error debajo del correspondiente input.

Ej:

 <div *ngIf="!first.valid && (first.dirty || first.touched)">
     <small class="text-danger font-weight-bold" *ngIf="first.errors.required">Campo obligatorio</small>
     <small class="text-danger font-weight-bold" *ngIf="first.errors.minlength">Longitud minima: 3 caracteres</small>
     <small class="text-danger font-weight-bold" *ngIf="first.errors.maxlength">Longitud maxima: 10 caracteres</small>
 </div>

Quiero pasar de hacer eso pues me resulta una forma de ensuciar la vista del componente mas de la cuenta. ¿No podria, junto a las validaciones (tanto de la clase Validator como las customizadas que tengo abajo) poner un mensaje en string que se displayearia por cada validacion fallida dentro de cada control del formulario? Poco un pseudocodigo de lo que me refiero:

Tengo esta validacion actualmente:

  this.registerForm = this.fb.group({
    name:['',[Validators.required]],
    email:['',[Validators.required,Validators.email,Validators.pattern('"^[a-z0-9._%+-]+@[a-z0-9.-]+\\\\.[a-z]{2,4}$"')]],
    password:['',[Validators.required]],
    repeat_password:['',[Validators.required]],
  },{
    validators:[this.checkPasswords,this.checkNameAndEmailMustBeEquals]
  });

Pues poner por ejemplo, en el caso de que el name, que esta requerido, no se haya puesto:

 name:['',[Validators.required: 'Oye, que aqui dice que el name debe ser requerido'
        Validators.minLength(3),'Caracteres min: 3'
  ]],

Y asi con todo.

Y ya en la vista poner :

Si name.validacionMinLengthFalla => name.validacionMin.mensaje

Espero que se me entienda, pero me parece una forma espectacular de modularizarlo, pero no he encontrado como hacerlo, no se si es que no es buena idea por x motivos o algo, espero me puedan ayudar. Muchas gracias, de verdad.

5
  • 1
    No hay nada así en Angular nativo, ya que tendrías que definir cómo quieres mostrar los inputs y los mensajes de error. Angular en ese sentido te da total libertad, pero sí puedes hacerlo usando por ejemplo angular material: material.angular.io/components/input/… Commented el 16 feb. 2021 a las 13:51
  • @PabloLozano entonces por un lado empleo la logica de validacion y en la vista debo hacer manualmente cada mensaje de cada tipo de error en el caso de que falle ese tipo, no es asi ? Es la forma en la que angular lo contempla?
    – josanangel
    Commented el 16 feb. 2021 a las 18:06
  • 1
    podrías crear una funcionalidad para comprobar la validación y devolver el mensaje de error, simplificando el template Commented el 16 feb. 2021 a las 18:15
  • 1
    Puedes crear un componente dónde guardes toda la lógica de la validación. Le pasas el formControl y obtienes todos los datos para mostrar el error.
    – Legna
    Commented el 16 feb. 2021 a las 20:50
  • @PabloLozano de acuerdo, muchas gracias. Me da la sensacion que esta 'bien visto' el hacer los if en la vista como me temia, y que se suele hacer. No es asi ? Un saludo
    – josanangel
    Commented el 17 feb. 2021 a las 18:26

1 respuesta 1

1

Creo que lo que puedes hacer, es crear todas tus validaciones de manera "custom". Es decir, tendrías que implementar tu propio [required, email, etc...], y así devolver lo que mas te acomode. Te dejo un ejemplo.

En este validador, vamos a evaluar nuestro control.dirty & control.touched para ahorrar código en el html. Así mismo podemos devolver propiedades extra para saber que error especifico sucede además regresamos nuestro mensaje "custom".

Edit: mejor aún podemos enviar el mensaje parametrizado.

export function requiredValidator(message: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value: string = control.value;
    const isNull = value == null;
    const isEmpty = /\s/g.test(value);
    const isLengthZero = value.trim().length == 0;
    const required =
      isNull || isEmpty || (isLengthZero && (control.dirty || control.touched));
    return required
      ? {
          required: {
            message: message,
            isNull,
            isEmpty,
            isLengthZero
          }
        }
      : null;
  };
}

Lo agregamos a nuestro formulario.

  this.myForm = fb.group({
      myField: ["", [requiredValidator("El nombre es requerido")]]
    });

Ya en nuestro html solo verificamos si el control contiene errores. De ser así obtenemos el mensaje de el validador.

<form [formGroup]="myForm">
    <input id="myField" type="text" formControlName="myField">
    <!-- Si el control contiene errores, los mostramos -->
    <span *ngIf="myForm.get('myField').errors">
      {{myForm.get('myField').errors.required.message}}
    </span>
 <!-- Podemos ver el objeto en caso de error:  { "required": { "message": "El nombre es requerido", "isNull": false, "isEmpty": false, "isLengthZero": true } }-->
 {{myForm.get('myField').errors | json}}
</form>
1
  • De acuerdo, me da la sensacion de que no esta tan mal visto hacer los if de validacion hardcodeados en angular no se porque. ¿Me equivoco? . Muchas gracias por tu aporte de verdad.
    – josanangel
    Commented el 17 feb. 2021 a las 18:27

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.