entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Validar con Angular 2 input sean iguales

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>
  </form>
</div>

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

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta