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

Question

我有一个响应式表单，其中包含非常相关的验证。我创建了一个 class，它具有跨域验证的所有功能，但如果我尝试使用 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

您可以这样使用 Validators.compose：

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

Answer 2

validator: can be a single validator function, or an array of validator functions

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

FormBuilder#group

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

How to set multiple cross fields validators in a fromGroup Angular 4

angular

angular-reactive-forms

angular-validation

angular-validator