javascript - Angular 5 中带有 "Compare Password"验证的响应式(Reactive)表单

Question

我很绝望，因为我无法让它发挥作用。我尝试了很多事情，但据我所知，没有任何效果。

有人可以帮助我让“比较密码”验证工作吗？

这是我的注册.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl} from '@angular/forms';


@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})

export class RegistrationComponent implements OnInit {

  constructor(
    private formBuilder: FormBuilder
  ) {
       this.createForm();
     }


  form: FormGroup;

  loading = false;
  helpblock = true;

  createForm() {
    this.form = this.formBuilder.group({
      email: new FormControl('', {
        validators: Validators.compose([
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(40),
                      Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
                    ]),
        updateOn: 'change',
        }),
      username: new FormControl('', {
        validators: Validators.compose([
                      Validators.required,
                      Validators.minLength(3),
                      Validators.maxLength(15),
                      Validators.pattern(/^[a-zA-Z0-9]+$/)
                    ]),
        updateOn: 'change'
        }),
      password: new FormControl('', {
        validators: Validators.compose([
                      Validators.required,
                      Validators.minLength(7),
                      Validators.maxLength(35),
                      Validators.pattern(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{7,35}$/)
                    ]),
        updateOn: 'change'
        }),
        confirm_password: new FormControl('', {
          validators: Validators.compose([
                        Validators.required,
                        // this.matchingPasswords('password', 'confirm_password').bind(this)
                      ]),
          updateOn: 'change'
          }),
        compare_pws: Validators.call(this.matchingPasswords('password', 'confirm_password')),
    });
  }

  matchingPasswords(password, confirm_password) {
    console.log('0');
    return (group: FormGroup) => {
      if (group.controls[password].value === group.controls[confirm_password].value) {
        console.log('1');
        return null;
      } else {
        console.log('2');
        return { 'matchingPasswords': true };
      }
    };
  }

  register(form) {
    console.log(this.form);
  }


  ngOnInit() {}

}

一切正常。仅比较密码对我来说不起作用..
有办法解决这个问题吗？

Answer 1

编写自定义验证器类

import {AbstractControl} from '@angular/forms';
export class PasswordValidation {

    static MatchPassword(AC: AbstractControl) {
       let password = AC.get('password').value; // to get value in input tag
       let confirmPassword = AC.get('confirmPassword').value; // to get value in input tag
        if(password != confirmPassword) {
            console.log('false');
            AC.get('confirmPassword').setErrors( {MatchPassword: true} )
        } else {
            console.log('true');
            return null
        }
    }
}

将其添加到表单生成器

validator: PasswordValidation.MatchPassword // your validation method

答案感谢 - https://scotch.io/@ibrahimalsurkhi/match-password-validation-with-angular-2

More on reactive Forms and validators