validar - validação angular 4




senha e confirmar validação de campo de senha angular2 formulários reativos (4)

Eu fiz uma abordagem diferente que funcionará para qualquer controle. Primeiro eu defino os controles básicos do formulário:

    this.myForm = this.formBuilder.group({
            name: ['', Validators.required],
            password: ['', Validators.required],
    });

Em seguida, crio um novo controle para confirmar o valor com meu validador personalizado:

    const confirmPasswordControl = new FormControl('', {
            validator: sameValueAs(this.myForm, 'password')
    });

    this.myForm.addControl('confirmPassword', confirmPasswordControl);

O código do validador sameValueAs é o seguinte, você pode defini-lo em um arquivo separte para ser usado em qualquer lugar

export function sameValueAs(group: FormGroup, controlName: string): ValidatorFn {
    return (control: FormControl) => {
          const myValue = control.value;
          const compareValue = group.controls[controlName].value;

          return (myValue === compareValue) ? null : {valueDifferentFrom:controlName};

    };
}

Eu preciso verificar se a senha e confirmar os campos de senha têm o mesmo valor usando a forma reativa angular2. Eu vi muitas respostas sobre o mesmo aqui, formulário Angular 2 validando para repetir senha , Comparando campos no validador com angular2 , mas nenhum pareceu funcionar para mim.Pode alguém por favor me ajude. "This" é indefinido na minha função de validação: (. Compartilhando meu código,

this.addEditUserForm = this.builder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            title: ['', Validators.required],
            email: ['', Validators.required],
            password: ['', Validators.required],
            confirmPass: ['', [Validators.required, this.validatePasswordConfirmation]]
        });
validatePasswordConfirmation(group: FormGroup): any{
        let valid = true;
        // if (this.addEditUserForm.controls.password != this.addEditUserForm.controls.confirmPass) {
        //     valid = false;
        //     this.addEditUserForm.controls.confirmPass.setErrors({validatePasswordConfirmation: true});
        // }
        return valid;
    }

Isto é o que eventualmente funcionou para mim -

this.addEditUserForm = this.builder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            title: ['', Validators.required],
            email: ['', Validators.required],
            password: ['', Validators.required],
            confirmPass: ['', Validators.required]
        },{validator: this.checkIfMatchingPasswords('password', 'confirmPass')});



checkIfMatchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
          return (group: FormGroup) => {
            let passwordInput = group.controls[passwordKey],
                passwordConfirmationInput = group.controls[passwordConfirmationKey];
            if (passwordInput.value !== passwordConfirmationInput.value) {
              return passwordConfirmationInput.setErrors({notEquivalent: true})
            }
            else {
                return passwordConfirmationInput.setErrors(null);
            }
          }
        }

Para aqueles que desejam adicionar um validador personalizado sem serem forçados a passar da validação do grupo de formulários, é possível adicionar o validador depois de definir o formulário.

Uma vantagem dessa abordagem é que o erro é adicionado ao controle de formulário e não ao grupo de formulários. Dessa forma, é mais fácil exibir o erro associado ao campo, pois podemos verificar o erro diretamente no campo / controle de formulário.

Foi assim que eu implementei:

Validador personalizado

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class MismatchValidator {

  static mismatch(otherInputControl: AbstractControl): ValidatorFn {

    return (inputControl: AbstractControl): { [key: string]: boolean } | null => {
      if (inputControl.value !== undefined
        && inputControl.value.trim() != ""
        && inputControl.value !== otherInputControl.value) {
        return { 'mismatch': true };
      }

      return null;
    };
  }
}

Aplicando o validador customizado ao controle de formulário

  ngOnInit() {
    this.initForm();
    // The validators are set after defining the form in order to be able to access the password control and pass it to the custom validator as a parameter
    this.setValidators();
  }

  private initForm() {
    this.myForm = this.formBuilder.group({
      password: new FormControl(''),
      passwordConfirmation: new FormControl('')
    });
  }

  private setValidators() {
    const formValidators = {
      "password": Validators.compose([
        Validators.required,
        //....
      ]),
      "passwordConfirmation": Validators.compose([
        Validators.required,
        MismatchValidator.mismatch(this.myForm.get("password")) 
      ])
    }

    this.passwordRecoveryForm.get("password").setValidators(
      formValidators["password"]
    );
    this.passwordRecoveryForm.get("passwordConfirmation").setValidators(
      formValidators["passwordConfirmation"]
    );
  }

Os validadores são definidos após a definição do formulário para poder acessar o controle de senha e passá-lo ao validador customizado como um parâmetro.


Se você não quiser passar por um validador personalizado, basta criar um campo de entrada que seja autônomo e, portanto, não será computado em seu formGroup, mas sim por meio de ngModel

<input type="password" matInput [(ngModel)]="passwordConfirm" [ngModelOptions]="{standalone: true}">

Em seguida, em seu ts, você pode validar e lançar um erro ou invalidar o formulário, se desejar. Achei um pouco mais rápido e prático:

// Verifique o jogo de senhas

  if (this.staffAccountForm.value.password !== this.passwordConfirm) {
    this.snackbar.snackBarSimple('Passwords do not match.');
    return false;
  }




angular2-forms