时间戳

首页 > 解决方案 > 是否可以创建一个自定义表单控件验证函数，该函数具有响应式表单的依赖项

angular6 - 是否可以创建一个自定义表单控件验证函数，该函数具有响应式表单的依赖项

问题描述

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

'formcontrol: [null, myValidationFunction]'</p>

据我所知，验证函数采用“FormControl”并返回一个对象。没有办法向它传递另一个参数。

我读过我可以创建一个“指令”，但示例将它用于“模板”驱动的表单。

标签： angular6

解决方案

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

模板.html

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

组件.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})
});}

推荐阅读