Angular4：两个或多个自定义验证

Question

我想通过自定义验证创建两个或多个方法来检查恢复密码，但我无法在表单生成器中获得两个以上的参数，消息总是出现：

使用给定的配置映射构造一个新的 {@link FormGroup}。额外参数映射的有效键是 validator 和 asyncValidator。

预期有 1-2 个参数，但得到了 3 个。

一种方法可以，第二种方法不行

方法：

static MatchPreviousPassword(AC: AbstractControl) {
    const previousPassword = 'guide';
    const confirmPreviousPassword = AC.get('previousPassword').value;
    if (previousPassword !== confirmPreviousPassword) {
      console.log('false');
      AC.get('previousPassword').setErrors({ MatchPassword: true });
    } else {
      console.log('true');
      return null;
    }
  }
  static MatchPassword(AC: AbstractControl) {
    const password = AC.get('newPassword').value;
    const confirmPassword = AC.get('confirmPassword').value;
    if (password !== confirmPassword) {
      console.log('false');
      AC.get('confirmPassword').setErrors({ MatchPassword: true });
    } else {
      console.log('true');
      return null;
    }
  }

表单生成器：

buildForm() {
    const min_char = 4;
    const max_char = 10;
    this.passwordForm = this.fb.group({
      'previousPassword': [this.objAuthentication.password,
      Validators.compose([ Validators.required, Validators.minLength(min_char), Validators.maxLength(max_char),])],

      'newPassword': [this.objAuthentication.password,
      Validators.compose([Validators.minLength(min_char), Validators.maxLength(max_char), Validators.required])],

      'confirmPassword': [this.objAuthentication.password, Validators.required]
    },
      {
        validator: UserPasswordResetComponent.MatchPassword << Trouble here!!!
      });
  }

Answer 1

这就是我在项目中的做法（使用反应式方法）：

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

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

export class RegisterComponent implements OnInit{
  registerForm: FormGroup;

  ngOnInit() {
    this.registerForm = new FormGroup({
      'fullName': new FormControl(null, [Validators.minLength(2), Validators.required]),
      'position': new FormControl(null, [Validators.required]),
      'email': new FormControl(null, [Validators.email, Validators.required]),
      'password': new FormControl(null, [Validators.minLength(6), Validators.required]),
      'passwordRepeat': new FormControl(null, [Validators.minLength(6), Validators.required]),
      'image': new FormControl([], []),
    }, 
    //two custom validators here:
    [passwordMatch, myImageValidation]);
  }
}

// password validator
export function passwordMatch(control: FormGroup) : {[key: string]: boolean}
  {
    return control.value.password !== control.value.passwordRepeat ? {'passwordMatch': true} : null;
  }
// image validator just for example
export function myImageValidation(control: FormGroup) : {[key: string]: boolean}
  {
    return control.value.image !== null ? {'myImageValidation': true} : null;
  }

希望它对你有用。如果您有任何问题，请告诉我。祝你编码顺利。

Angular4：两个或多个自定义验证

Angular 4: Two or more custom validation

angular

angular4-forms