是否可以创建一个自定义formcontrol验证功能，该功能具有对Reactive Forms的依赖关系

Question

我有一个反应式表单，其中有一个“密码”和“验证密码”字段。我想为“验证密码”字段创建一个自定义验证功能。它应检查“验证密码”的值是否与“密码”相同。是否可以创建这样的验证功能并在创建表单控件时使用它？

‘formcontrol：[null，myValidationFunction]’

据我所知，验证功能采用“ FormControl”并返回一个对象。无法将另一个参数传递给它。

我已阅读到可以创建“指令”，但示例将其用于“模板”驱动的表单。

Answer 1

一种实现此目的的方法是将密码和verifyPassword放入自身的FormGroup中。然后可以将此formGroup传递给自定义验证函数，该函数采用AbstractControl Type作为FormGroup从其扩展的参数。所以你可以这样：

template.html

<form [formGroup]="main">
  <!-- Other FormControls -->
  <div formGroupName="passwordGroup">
    <!-- input element for password FormControl -->
    <!-- input element for verifyPassword FormControl -->
  </div>
</form>

component.ts

function passwordValidator(c: AbstractControl) : {[key: string] : boolean} | null {
          let password = c.get('password'); 
          let verifyPassword = c.get('verifyPassword'); 
          if(password.value === verifyPassword.value)
            return null;
          else
            return {'match' : true};    
        }

ngOnInit() {
        this.main = this.fb.group({
            otherFormControls : [''],
            passwordGroup: this.fb.group({
            password: ['',[Validators.required],
            verifyPassword: ['',Validators.required]
            },{validator : passwordValidator})
});}