Как установить несколько валидаторов кросс-полей в fromGroup Angular 4
У меня есть реактивная форма, которая имеет очень взаимосвязанные подтверждения. Я создал класс, в котором есть все функции для проверки между полями, но если я пытаюсь установить его с помощью 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
2 ответа
validator: может быть единственной функцией validator или массивом функций validator
this.myForm = this.formBuilder.group({...},
{ validator: [ MyValidatorClass.myCrossFieldValidator1 ,
MyValidatorClass.myCrossFieldValidator12 ,
MyValidatorClass.myCrossFieldValidator3
]
});
Ты можешь использовать Validators.compose
как это:
{ validator: Validators.compose([
MyValidatorClass.myCrossFieldValidator1,
MyValidatorClass.myCrossFieldValidator2
])}