пароль и подтверждение подтверждения поля пароля угловые2 реактивные формы

Мне нужно проверить, имеют ли пароль и подтверждают, что поля пароля имеют одинаковое значение, используя реактивную форму angular2. Я видел много ответов на то же здесь, форму Angular 2, подтверждающую повторный пароль , сравнивая поля в валидаторе с угловым2 , но никто не работал для меня. Может кто-то, пожалуйста, помогите. «Это» не определено в моей функции проверки: (Разделяя мой код,

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; } 

Это то, что в конечном итоге сработало для меня –

 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); } } } 

Лучше всего было бы иметь вложенную группу внутри группы форм, где у нас есть специальный валидатор, проверяющий группу форм с password и confirmPass , поэтому, когда confirmPass либо из полей изменяется, валидатор уволен, поскольку он ранее срабатывает только при confirmPass поле изменено.

Поэтому вместо этого сделайте что-то подобное внутри внешней группы form:

 // ... passwords: this.fb.group({ password: ['', [...]], confirmPass: ['', [...]] }, {validator: this.checkPasswords}) // add a validator for the whole group // ... 

а затем валидатор может выглядеть так:

 checkPasswords(group: FormGroup) { // here we have the 'passwords' group let pass = group.controls.password.value; let confirmPass = group.controls.confirmPass.value; return pass === confirmPass ? null : { notSame: true } } 

Отображение ошибки проверки может быть выполнено следующим образом:

 *ngIf="addEditUserForm.hasError('notSame', 'passwords')" 

Конечно, вам не нужно иметь вложенную группу, но лучше не иметь настраиваемый огонь проверки подлинности каждый раз, когда какие-либо изменения происходят с формой. Таким образом, он запускается только при изменении этой внутренней группы форм.

Если вы хотите сделать это таким образом, вам нужно привязать функцию к текущему «этому» контексту. Перейдите this.validatePasswordConfirmation.bind(this) но обратите внимание, что эта функция будет передана FormControl для подтверждения, а не FormGroup, как вы заявили в сигнатуре функции.

Я сделал другой подход, который будет работать для любого контроля. Сначала я определяю основные элементы управления формы:

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

Затем я создаю новый элемент управления для подтверждения значения с помощью своего настраиваемого валидатора:

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

Код этого валидатора sameValueAs выглядит следующим образом, вы можете определить его в файле separte, который будет использоваться где угодно

 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}; }; } 

Если вы не хотите проходить через специальный валидатор, вы можете просто создать поле ввода, которое является автономным и, следовательно, не будет вычисляться в вашей группе форм, а через ngModel

Затем в вашем ts вы можете просто проверить и выбросить ошибку или аннулировать форму, если хотите. Просто нашел это немного быстрее и практично:

// Проверка соответствия паролей

  if (this.staffAccountForm.value.password !== this.passwordConfirm) { this.snackbar.snackBarSimple('Passwords do not match.'); return false; } 
  • Angular2 вложенная форма с шаблоном
  • Выбрать на основе enums в Angular2
  • Давайте будем гением компьютера.