Question

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

Answer 1

para este caso seria que en el input2 utilices el evento keyUp, hacemos el llamado a la función y le enviamos el valor de lo que se esta escribiendo

<input (keyup)="validarIguales($event.target.value)">

y ya en la función validarIguales(valor: string), lo que se hace es obtener el valor del input1, de esta forma:

validarIguales(valor: string) {
    let valor1 = document.getElementById("input1").value;

    if( valor === valor1) {
        console.log('Los valores son iguales');
    } else {
        console.log('los valores no son iguales');
    }
}

y ya es que valides con estilo o como lo desees, para avisarle al usuario que los datos no son iguales.