2

Perdón si es que es algo fácil, pero es que estoy haciendo mis pininos en Angular 5 pero tengo la siguiente cuestión.

Me gustaría validar un FormGroup, se que hay aproximaciones al crear formularios, por template y por data, actualmente estoy usando la aproximación por data, tengo el siguiente esquema.. Tengo un objeto:

registro: Object = {
nombre: null,
apellidoPaterno: null,
apellidoMaterno: null,
rfc: null,
curp: null,
telefono: null,
email: null,
passwords: {
  password1: "",
  confirmPassword: ""
}
};

Hago una declaración:

forma: FormGroup;

y en el constructor declaro:

this.forma = new FormGroup(
  {
    'nombre': new FormControl('', [Validators.required]),
    'apellidoPaterno': new FormControl('', [Validators.required]),
    'apellidoMaterno': new FormControl('', [Validators.required]),
    'rfc': new FormControl('', [Validators.required]),
    'curp': new FormControl('', [Validators.required]),
    'telefono': new FormControl('', [Validators.required]),
    'email': new FormControl('', [Validators.required, Validators.email]),
    'passwords': new FormGroup({
      'password': new FormControl(''),
      'confirmPassword': new FormControl('')
    }, [Validators.required]

    )
  });

y mi html:

<div class="col-md-12">
<form [formGroup]="forma" (ngSubmit)="guardar()" novalidate>

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Nombre:</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" placeholder="Ingrese su nombre completo" formControlName="nombre" [ngClass]="{ 'is-invalid': !forma.controls['nombre'].valid  && forma.controls['nombre'].touched  }">
    <div *ngIf=" forma.controls['nombre'].touched  && !forma.controls['nombre'].valid" class="invalid-feedback">
      Es importante conocer su nombre
    </div>
  </div>
</div>
...
<div >
  <div class="form-group row" formControlName="password">
    <label class="col-sm-2 col-form-label">Contraseña:</label>
    <div class="col-sm-10" formGroupName="passwords">
      <input type="password" class="form-control" placeholder="Ingrese su nombre completo" >
      {{forma.get('passwords.password').valid}}
      <div *ngIf="forma.controls['passwords'].controls['confirmPassword'].invalid">
        Invalido
      </div>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Repita su contraseña:</label>
    <div class="col-sm-10" formGroupName="passwords">
      <input type="password" class="form-control" placeholder="Ingrese su nombre completo">
      {{forma.get('passwords.confirmPassword').valid}}
      <div *ngIf="forma.controls['passwords'].controls['password'].invalid">
        Invalido
      </div>
    </div>
  </div>
</div>

<button type="submit" class="btn btn-outline-primary btn-block">Guardar</button>

El caso es que el control se valida al perder el foco. Si aplicas esta secuencia de acciones no me funciona:

1) introduces password. Te dará un error en password al perder foco por ser diferente que confirmPassword (que esta vacio)

2) introduces como confirmPassword la misma que introdujiste como password. Al perder el foco confirmPassword será valida pero password sigue siendo inválida porque no se ejecuta su validador.

Me gustaria validar en tiempo real que los 2 inputs sean validos y que muestre el error en el input confirmPassword

2 respuestas 2

2

Código

    private forma: FormGroup;
    /**
    * @summary Metodo constructor del componente (inyección de dependencias)
    * @param _form Manejar formularios reactivos
    */
    constructor(private _formBuilder: FormBuilder) { }
    /**
    * @summary Ejecutado seguido del método contructor
    */
    ngOnInit() {
        this.initForm();
    }
    /**
    * @summary Crea nuestro formulario
    */
    private initForm = (): void {
        this.forma = this._formBuilder.group({
          password: ['', [Validators.required]],
          confirmPassword: ['', [Validators.required]],
        });
    }

    /**
     * @summary Valida si las contraseñas coinciden
     * @param _form FormGroup => formulario
     * @return boolean
     */
    private passwordsMatch = (_form: FormGroup): boolean => {
      if (_form.controls['password'].touched && _form.controls['confirmPassword'].touched) {
          if (_form.value.password === _form.value.confirmPassword) {
              return true;
          } else {
              return false;
          }
      }
      return true;
  }

  /**
   * @summary Vefifica las contraseñas que sean validas y coincidan
   * @param _field FormControlName a validar
   * @param _form FormGroup => formulario
   * @return Object json: aplica o no la clase  "is-invalid" borde del input en rojo
   */
  private verifyPasswords = (_field: string, _form: FormGroup): any => {
      let result = false;
      if (!this.passwordsMatch(_form) || !this.isFieldValid(_field, _form)) {
          result = true;
      }
      return { 'is-invalid': result };
  }

  /**
   * @summary Usada para cuando un campo no cumple una validación y  mostrar el mensaje
   * @param _field FormControlName ==> campo a validar
   * @param _form FormGroup ==> Formulario al que pertenece el campo a validar
   * @return boolean
   */
  public isFieldValid(_field: string, _form: FormGroup): boolean {
      let valid = true;
      if (_form.get(_field).invalid && _form.get(_field).touched) {
          valid = false;
      }
      return valid;
  }

En la vista

<div class="col-md-12">
    <form [formGroup]="forma" (ngSubmit)="guardar()" novalidate>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Contraseña:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" formControlName="password" [ngClass]="verifyPasswords('password', forma)">
                <div *ngIf="!isFieldValid('password', forma)" class="invalid-feedback">
                    Inválido
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Repita su contraseña:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control m-input" formControlName="confirmPassword" [ngClass]="verifyPasswords('confirmPassword', forma)">
                <div *ngIf="!isFieldValid('confirmPassword', forma)" class="invalid-feedback">
                    Inválido
                </div>
                <div *ngIf="!passwordsMatch(forma)" class="invalid-feedback">
                    Las contraseñas no coinciden.
                </div>
            </div>
        </div>
    </form>
</div>
0

Una forma simple de validarlo es a nivel de FormGroup y no a nivel FormControl

custom-validators.ts

export class CustomValidators {

    static match(firstControlName, secondControlName, customError = 'mismatch') {
        return (fg: FormGroup) => {
            return fg.get(firstControlName).value === fg.get(secondControlName).value ? null : { [customError]: true };
        };
    }

}

Componente ts

public exampleForm: FormGroup;

constructor(
    private fb: FormBuilder
) {
    this.exampleForm = this.fb.group(
        {
            password: ['', [
                Validators.required,
                Validators.minLength(6)
            ]],
            confirm_password: ['', Validators.required]
        },
        {
            validator: CustomValidators.match('password', 'confirm_password', 'password-mismatch')
        }
    );
}

Componente html

<form [formGroup]="exampleForm" (ngSubmit)="submit()">
    <div>
        <input type="password" placeholder="Enter your password" formControlName="password" autocomplete="new-password">
    </div>
    <div>
        <input type="password" placeholder="Confirm password" formControlName="confirm_password"
            autocomplete="new-password">
        <div *ngIf="exampleForm.errors">
            <small class="text-danger" *ngIf="exampleForm.errors['password-mismatch']">
                Las contraseñas no coinciden.
            </small>
        </div>
    </div>
    <button type="submit" [disabled]="exampleForm.invalid">
        Save
    </button>
</form>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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