Проверьте тот же пароль и подтвердите пароль в угловой реактивной форме - FormBuilder

Question

Я пытаюсь создать регистрационную форму Angular 5 с .NET Core.

Я проверяю, совпадают ли пароль и повторно введенный пароль в форме регистрации.Я использую FormBuilder для формы.

Но проверка пароля1 и пароля2 всегда терпит неудачу.Я пробовал === также.

if (this.RegistrationForm.valid) {
  if (this.RegistrationForm.get('password1') == this.RegistrationForm.get('password2')) {
    this.MyService.Register(this.RegistrationForm.value).subscribe((data) => {}, error => this.errorMessage = error)
  } else {
    this.errorMessage = "cdscs";
  }
}

constructor(private fb: FormBuilder, private MyService: RoadSignService) {
        this.RegistrationForm = this.fb.group({
            Id: 0,
            name: ['', [Validators.required]],
            email: ['', [Validators.required]],
            gender: ['', [Validators.required]],
            department: ['', [Validators.required]],
            address: ['', [Validators.required]],
            password1: ['', [Validators.required]],
            password2: ['', [Validators.required]]
        })
    }

Answer 1

Я бы подошел к этому как к валидатору во всей FormGroup, а не к отправке формы, а затем выполнил бы проверку.

Когда вы определяете FormGroup, вы можете добавить валидатор для всей группы, давая вамдоступ ко всем элементам управления / значениям как таковой:

validatePasswords(formGroup: FormGroup): any {
    const password = formGroup.controls['password'];
    const confirmPassword = formGroup.controls['confirmPassword'];

    // don't validate
    if (password.pristine || confirmPassword.pristine) {
      return null;
    }

    formGroup.markAsTouched();

    if (password.value === confirmPassword.value) {
      return null;
    }

    return confirmPassword.setErrors({
      notEqual: true
    });
  }

form = this.formBuilder.group({
  . . .,
  password: [
    '', [
      Validators.required,
      Validators.pattern(regexPatterns.password),
    ]
  ],
  confirmPassword: [
    '', [
      Validators.required,
      Validators.pattern(regexPatterns.password)
    ]
  ]
}, {
  validator: this.validatePasswords
});

В этом примере regexPatterns.password - это просто общий импорт объектов RegExp, а выражение: /^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&+=*]).*/

Теперь вы можете показать пользователю, если два поля соответствуют до , вы отправляете форму и вызываете любую другую логику, вызовы API или любые дорогостоящие операции.

Answer 2

Полагаю, что лучшим подходом здесь было бы добавить пользовательский валидатор для сравнения обоих паролей, например:

// Custom validator
function validateRePassword(control: FormControl){
  const { root } = control;
  const pass = root.get('password'),
        rePass = root.get('rePassword');

  if(!pass || !rePass) {
    return null;
  }

  const passVal = pass.value,
        rePassVal = rePass.value;

  const result = passVal===rePassVal ? null : { passDontMatch: true };
  return result;
}

// Form initialization
this.formGroup = fb.group({
      user: fb.control('UserName'),
      password: fb.control(''),
      rePassword: fb.control('', [validateRePassword])
    })

// function to check if the control has the 'passDontMatch' error and therefore display some related message
passMatch(){
    return !this.formGroup.get('rePassword').hasError('passDontMatch');
  }

Answer 3

Как только ваш пользователь отправит форму, значение формы будет доступно в виде объекта JSON в this.RegistrationForm.value.Таким образом, вы можете использовать это для сравнения.

Просто используйте this.RegistrationForm.value.password1 === this.RegistrationForm.value.password2

if (this.RegistrationForm.valid) {
  if (this.RegistrationForm..value.password1 === this.RegistrationForm.value.password2) {
    this.MyService.Register(this.RegistrationForm.value)
      .subscribe(
        (data) => {}, 
        error => this.errorMessage = error
      )
  } else {
    this.errorMessage = "cdscs";
  }
}

PS: Если вы хотите создать пользовательский валидатор, который делает это, см. Этот OP .