Question

我有一个反应形式，具有非常相关的验证。我创建了一个具有跨字段验证所有功能的类，但是如果尝试使用Validators.validator进行设置，则它不会触发功能。如果我只是使用{validator: MyValidatorClass.myCrossFieldValidator1}，它将在该功能上起作用，但是我需要应用更多的验证器，并且它不是很好的解决方案，开始创建子表单组。

我的代码看起来像这样的代码，但是带有其他名称

class MyValidatorClass {
  static myCrossFieldValidator1 ...
  static myCrossFieldValidator2 ...
  static myCrossFieldValidator2 ...
}

和表格：

 this.myForm = this.formBuilder.group({
      field1: ['', [Validators.required, Validators.min(0), Validators.maxLength(2)]],  // Done
      field2: ['', [Validators.required, Validators.min(0)]],
      field3: ['', [Validators.required]],
      ...},
     { validator: MyValidatorClass .myCrossFieldValidator1 } // This works but only for one function myCrossFieldValidator1 and is not what I need
     // I have tried with 
     validators & Validators: [MyValidatorClass .myCrossFieldValidator1 
                              ,MyValidatorClass .myCrossFieldValidator12
                              ,MyValidatorClass .myCrossFieldValidator3]

//但这不起作用）;

此处其他解决方案建议声明子组或将功能应用于字段，但我正在寻找的是将多个自定义跨字段验证器应用于我的组。不知道什么地方出了问题或技术的局限性。 Angular在其示例中仅显示了一个验证函数https://angular.io/guide/form-validation#cross-field-validation

的简单情况

Answer 1

验证器：可以是单个验证器函数，也可以是验证器数组功能

     this.myForm = this.formBuilder.group({...},
         { validator: [ MyValidatorClass.myCrossFieldValidator1 , 
                        MyValidatorClass.myCrossFieldValidator12 ,
                        MyValidatorClass.myCrossFieldValidator3
                      ] 
});

FormBuilder#group

Answer 2

您可以像这样使用Validators.compose：

{ validator: Validators.compose([
          MyValidatorClass.myCrossFieldValidator1, 
          MyValidatorClass.myCrossFieldValidator2
])}

如何在fromGroup Angular 4中设置多个交叉字段验证器

2 个答案: