Question

我正在尝试使用自定义验证构建模式驱动表单。我想验证用户插入的密码是否满足要求（大写后者，小写后者和数字）。问题是我不想在方法中编写正则表达式，我想要一个集中所有正则表达式的不可避免的服务。我能够将服务注入组件类，但无法以任何方式访问validetor方法中的服务实例。

任何人都知道如何访问该服务？

感谢。

这是我的代码：

export class SignUpComponent implements OnInit {
regexService:RegexService
  builder: FormBuilder
  signUpForm: FormGroup;
  email: FormControl;
  password: FormControl;
  passwordAgain: FormControl;


  matchedPassword (input: any) {
    if(!input.root || !input.root.controls)
    return null;

    if(input.root.controls.password.value===input.root.controls.passwordAgain.value)
      return null;
    else
      return { mismatchedPassword: true };
   }

   passwordAnswerRequirements(input: any){
     if(!input.root || !input.root.controls)
     return null;

     if(this.regexService.getRegex('password').test(input.value))
        return null;
      else
        return {notAcceptablePassword:true}
   }



  constructor(builder: FormBuilder,regexService:RegexService) {
    this.builder=builder;
    this.regexService=regexService;
  }

  ngOnInit(){
    this.email = new FormControl('', [
       Validators.required,
    ]);
     this.password = new FormControl('', [
        Validators.required,
        this.matchedPassword,
        this.passwordAnswerRequirements
     ]);
     this.passwordAgain=new FormControl('',[
        Validators.required,
        this.matchedPassword,
        this.passwordAnswerRequirements
     ]);
     this.signUpForm = this.builder.group({
       email: this.email,
       password: this.password,
       passwordAgain:this.passwordAgain
     });
  }

我的服务名称是'RegexService'，而validetor函数名称是'passwordAnswerRequirements'

Answer 1

您不需要声明服务变量，它已经在构造函数中，您可以在类中使用this.regexService，所以

export class SignUpComponent implements OnInit {
//regexService:RegexService  -- remove this line
  builder: FormBuilder
  signUpForm: FormGroup;
  email: FormControl;
  password: FormControl;
  passwordAgain: FormControl;



  constructor(builder: FormBuilder,private regexService:RegexService) {
    this.builder=builder;
   // this.regexService=regexService; -- you don't need this line
  }
....

Answer 2

我终于找到了一个解决方案..它不是最美观的，但它有效...... 我在'passwordAnswerRequirements'方法周围添加了一个wrap函数，从那里我可以抓住服务实例把它放在一个局部变量中。

  passwordAnswerRequirements() {
    let passwordRegexExp = this.regexService.getRegex('password');
    return (input: any) => {
      if (!input.root || !input.root.controls)
        return null;
      if (passwordRegexExp.test(input.value))
        return null;
      else
        return { notAcceptablePassword: true }
    };
  }

从角度2中的表单验证器方法访问类变量

2 个答案: