Angular reactive form custom validation, for the entire formGroup at the same time

12 Views Asked by At

I have this form:

EDI_TRANSACTION_VALIDATORS = this.formBuilder.group({
        'eligibilitySettings': this.formBuilder.group({
            'id': [0],
            'ediPartnerId': ['', []],
            'ediPayerMasterId': ['',[]],
            'evvMasterId': ['',[]],
            'ediStationId': [''],
            'other': [''],
            'payerId': [''],
            'payerPortalUrl': [''],
            'primarySystem': [''],
            'transactionSystemType':[''],
            'useStationIdAsAuthPrefix':[''],
            'ediClearingHouse':[false],
            'evvSystem':[false],
            'payerPortal':[false],
            'otherCheckbox':[false],
            'state':['']
        }, {validator: this.conditionallyRequiredValidator('ediClearingHouse',

'ediPartnerId', 'ediPayerMasterId', 'primarySystem', 'evvSystem','evvMasterId')}),

and this function for validate the form, this funtion works

 conditionallyRequiredValidator(controlLabelConditional1: string, controlLabelRequired1: string, controlLabelRequired2?: string, 

controlLabelRequired3?: string, controlLabelConditional2?: string, controlLabelRequired4?: string) { return (group: FormGroup): {[key: string]: any} => { const masterControl = group.controls[controlLabelConditional1]; const masterControl2 = group.controls[controlLabelConditional2]; const controlRequired1 = group.controls[controlLabelRequired1]; const controlRequired2 = group.controls[controlLabelRequired2]; const controlRequired3 = group.controls[controlLabelRequired3];
const controlRequired4 = group.controls[controlLabelRequired4];
if (masterControl.value && masterControl2.value) { return Validators.required(controlRequired1),Validators.required(controlRequired2),Validators.required(controlRequired3),Validators.required(controlRequired4) } else if(masterControl.value && !masterControl2.value){ return Validators.required(controlRequired1),Validators.required(controlRequired2) } else if(masterControl2.value && !masterControl.value){ return Validators.required(controlRequired4) } controlRequired1.setErrors(null); controlRequired2.setErrors(null); controlRequired3.setErrors(null); controlRequired4.setErrors(null); return null; } }

the problem is that I need something like this more dynamically, that I can apply validators required to many controls at the same time.

   }, { validator: this.conditionallyRequiredValidator([{ controlLabel: 'ediClearingHouse', controlsLabelRequired:

['ediPartnerId', 'ediPayerMasterId'] }, { controlLabel: 'evvSystem', controlsLabelRequired: ['evvMasterId'] }]) }), 'payerType': [''], });

conditionallyRequiredValidator(conditionallyRequired: any) {
    return (group: FormGroup): { [key: string]: any } => {
        conditionallyRequired.forEach(element => {
            if (group.controls[element.controlLabel].value)
                element.controlsLabelRequired.forEach(controlLabelRequired => {
                    Validators.required(group.controls[controlLabelRequired]);
                })
                else {
                    element.controlsLabelRequired.forEach(controlLabelRequired => {
                        group.controls[controlLabelRequired].setErrors(null);
                    })
                }
        });
        return null;
    }
}
0

There are 0 best solutions below