Skip to main content
se eliminaron 26 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
 <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>
 <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>
 <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>
Origen Enlace
josanangel
  • 2.4k
  • 1
  • 24
  • 66

Angular. Validando formularios con FormGroup ¿No puedo preestablecer el mensaje en caso de fallo en el controlador del componente?

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.