How to not lose the initialized Validators after using setValidators Dynamically in Angular?

Question

I have a parent component Where I create a FormControl Array and initialize it with Validations.required Validator.

In Child Component I am adding a Dynamic Validator based on input from parent (true/false) but adding that Validator will remove 'required' from the Control.

How can I keep the initialized and later added Validators in the Form Control?

Answer 1

SetValidators will overwrite the validators with whatever you set. What you need to do is append additional validators keeping the current ones intact. See code below to do this.

    this.<<formControl>>.setValidators([
        this.newValidator(),
        this.<<formControl>>.validator
    ]);