Angular 2 conditional Validators.required?

Question

How should I go about conditionally requiring a form field? I made a custom validator, but the conditional variables that I pass to the custom validator are static and remain their initial values. What should my custom validator look like to get updated conditional values? Perhaps there is a way to do this with Validators.required instead of a custom validator?

private foo: boolean = false;
private bar: boolean = true;

constructor(private _fb: FormBuilder) {
    function conditionalRequired(...conditions: boolean[]) {
      return (control: Control): { [s: string]: boolean } => {
        let required: boolean = true;
        for (var i = 0; i < conditions.length; i++) {
          if (conditions[i] === false) {
            required = false;
          }
        }
        if (required && !control.value) {
          return { required: true }
        }
      }
    }
    this.applyForm = _fb.group({
          'firstName': ['', Validators.compose([
            conditionalRequired(this.foo, !this.bar)
          ])],
          ...
    });
}

Update (May 17, 2016)

It's been a long time since posting this, but I'd like to reference the .include() and .exclude() methods available on the ControlGroup class for anyone out there who is trying to create this functionality. (docs) While there are probably use cases for a conditional Validator like above, I've found the inclusion and exclusion of controls, control groups, and control arrays to be a great way to handle this. Just set the required validator on the control you'd like and include/exclude it as you please. Hope this helps someone!

But when I change foo to true elsewhere, the custom validator still shows foo as false. Throwing a console.log(conditions) in the validator returns [false, false] when I know that foo actually is true. I need to get [true, false]. I'm assuming this is because the conditions are set once because it's inside the constructor. Any way of getting around this behavior? — Louis Cruz

Erik Honn Erik Honn · Accepted Answer · 2016-08-09T14:58:06

I wanted a more generic version of it so I have written an extra validator for it that can be composed together with other validators. I'm still just starting to look at the forms module so don't expect this to be the most efficient code ever or to work in edge cases, but it's a good start. It works for normal use cases and might serve as a good starting point for others.

Made for rc.4 and the new forms module, the revalidateOnChanges part may be horrible (not sure of the best way to cause this behaviour), use at your own risk! :)

How to use it

The validator takes two arguments, a conditional function that is given the formGroup and that is expected to return true if the validation is to apply and false otherwise, and a validator (which may be a composition). It will revalidate the field when the formGroup is updated, and it's can currently only check things inside the same formGroup, but that should be easy to fix.

this.formBuilder.group({
    vehicleType: ['', Validators.required],
    licencePlate: [
        '',
        ExtraValidators.conditional(
            group => group.controls.vehicleType.value === 'car',
            Validators.compose([
                Validators.required,
                Validators.minLength(6)
            ])
        ),
    ]
});

In this example you have two fields, vehicleType and licencePlate. The conditional statement will apply the composed validator (required and minLength) if the vehicleType is "car".

You can use compose to apply several different conditionals that may or may not apply at the same time. Here is a slightly more complex example:

this.formBuilder.group({
    country: ['', Validators.required],
    vehicleType: ['', Validators.required],
    licencePlate: [
        '',
        Validators.compose([
            ExtraValidators.conditional(
                group => group.controls.vehicleType.value === 'car',
                Validators.required
            ),
            ExtraValidators.conditional(
                group => group.controls.country.value === 'sweden',
                Validators.minLength(6)
            ),
        ])
    ]
});

In this case we apply required if type is "car" and we apply minLength if country is "Sweden". If only one condition applies only that validation will apply, if both conditions applies then both validations apply.

The validator itself

Note that the object comparison is just a simple brute force because we are working with small object, if you are using Ramda or something you could cut a lot of code.

export class ExtraValidators {
    static conditional(conditional, validator) {
        return function(control) {
            revalidateOnChanges(control);

            if (control && control._parent) {
                if (conditional(control._parent)) {
                    return validator(control);
                }
            }
        };
    }
}
function revalidateOnChanges(control): void {
    if (control && control._parent && !control._revalidateOnChanges) {
        control._revalidateOnChanges = true;
        control._parent
            .valueChanges
            .distinctUntilChanged((a, b) => {
                // These will always be plain objects coming from the form, do a simple comparison
                if(a && !b || !a && b) {
                    return false;
                } else if (a && b && Object.keys(a).length !== Object.keys(b).length) {
                    return false;
                } else if (a && b) {
                    for (let i in a) {
                        if(a[i] !== b[i]) {
                            return false;
                        }
                    }
                }
                return true;
            })
            .subscribe(() => {
                control.updateValueAndValidity();
            });

        control.updateValueAndValidity();
    }
    return;
}

NOTE: remember to import the operator:
import 'rxjs/add/operator/distinctUntilChanged';

Angular 2 conditional Validators.required?

5 Answers