3
respostas

Validator de confirmar senha

Olá, durante o curso eu senti falta de um Validator para fazer verificação dos clássicos campos de "Senha" junto com "Confirma Senha", onde os dois obrigatoriamente tem que ter o mesmo valor para o formulário ser válido. Além da dúvida de como fazer esse tipo de Validator, também fiquei pensando se é um validator do tipo Síncrono ou Assíncrono. Gostaria muito que me respondessem. Obrigado desde já.

3 respostas

Fala aí Juan, tudo bem? Bom, o validador é síncrono, basicamente vai precisar pegar os dois valores e verificar se são iguais:

const senha = this.formGroup.get('senha').value;
const confirmarSenha = this.formGroup.get('confirmarSenha').value;
if (senha === confirmarSenha) {
    console.log('São iguais')
} else {
    console.log('São diferentes')
}

Algo mais ou menos assim.

Espero ter ajudado.

Eu tava procurando uma forma para colocar na estrutura dentro do group como Validator mesmo.

Algo como:

 ngOnInit() {
    this.cadastroForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
      repassword: ['', [Validators.required, myPasswordCheck]]
    };
  }

Fala aí Juan, o que você pode fazer é criar essa função de validação dentro da sua classe e acessar os outros campos do formulário, algo nesse sentido:

export class AppComponent implements OnInit {

  formularioDeLogin: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.formularioDeLogin = this.formBuilder.group({
      confirmarSenha: ['', this.validarSenhas],
      usuario: [''],
      senha: ['']
    });
  }

  validarSenhas = (confirmarSenha: FormControl): ValidatorFn => {
    console.log(confirmarSenha.value); // imprimindo o valor da confirmação de senha
    if (this.formularioDeLogin) {
      console.log(this.formularioDeLogin.get('senha').value); // imprimindo o vlaor da senha
    }
    return null;
  }

  acessar() {
    console.log(this.formularioDeLogin.getRawValue());
  }

}

E no template:

<div style="text-align:center">
  <form [formGroup]="formularioDeLogin" (submit)="acessar()">
    <input formControlName="usuario" type="text"><br/>
    <input formControlName="senha" type="password"><br/>
    <input formControlName="confirmarSenha" type="password"><br/>
    <button>Acessar</button>
  </form>
</div>

Atenção: A função que será chamada pelo FormGroup deve ser arrow function, do contrário ela não vai conseguir acessar o this.formularioDeLogin.

Espero ter ajudado.