remove custom validation dynamic into Angular 2

Question

i want set input required if checkbox is checked. validation working fine but when i uncheck checkbox at that time i remove required validation. but form not valid and save button not enabled.

here my formbuilder.

this.filterForm = this.formBuilder.group(
                {
                    has_not_visited_in_days_group: this.formBuilder.group({
                        has_not_visited_in_days: [false],
                        has_not_visited_in_days_input: [''],
                    }, {validator: this.requiredIfHasNotVisitedChecked}),
                 });

here custom validator function

requiredIfHasNotVisitedChecked(control: AbstractControl): void {
        const input = control.get('has_not_visited_in_days_input').value;
        const inputCheckbox = control.get('has_not_visited_in_days').value;
        control.get('has_not_visited_in_days_input').setValidators([]);
        if (inputCheckbox) {
            if (input === '' || input === null) {
                control.get('has_not_visited_in_days_input').setValidators([Validators.required]);
            }else {
                control.get('has_not_visited_in_days_input').setValidators([]);
            }
        }else{
            control.get('has_not_visited_in_days_input').setValidators([]);
        }
    }

also i tried

  control.get('has_not_visited_in_days_input').setValidators(null);

Thanks in advance. have any idea please help me.

AVJT82 · Accepted Answer · 2017-06-12 11:59:03Z

6

I don't see that you'd need the custom validator, you could just rely on a simple change-event:

Here I like to shorten the form controls in component by using variables, so that they are easier to work with, since property paths can get very long. Here are the two controls:

this.inputCtrl = this.filterForm.get('has_not_visited_in_days_group.has_not_visited_in_days_input')
this.checkboxCtrl = this.filterForm.get('has_not_visited_in_days_group.has_not_visited_in_days')

and then the change event for the checkbox:

<input (change)="check(checkboxCtrl.value)" type="checkbox" formControlName="has_not_visited_in_days"/>

And just like mentioned by Amit, you'd need to update the value and validity of the form control. Here's that and the function that checks the state of the checkbox and updates the validator accordingly:

check(bool) {
  if (bool) { 
    this.inputCtrl.setValidators([Validators.required])
  } else  {
    this.inputCtrl.setValidators(null)
  }   
  this.inputCtrl.updateValueAndValidity();
}

This is just a suggestion and present a option that I would personally prefer.

But if you prefer the custom validator, then go ahead with that (Amit's answer), just adding the updateValueAndValidity like suggested.

DEMO

answered Jun 12, 2017 at 11:59

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amit Over a year ago

I helped him in the chat via plunks and such, that's eventually what we did, but we skipped setting and clearing the validators altogether, disabling and enabling the control ended up being a more suitable solution since it skipped validation for that field entirely anyway.

Alessander Franca Over a year ago

Best solution ;)

Shailesh Ladumor · Accepted Answer · 2017-06-13 05:50:44Z

2

Try calling updateValueAndValidity({onlySelf: false, emitEvent: false});

Here's its signature:

updateValueAndValidity({onlySelf, emitEvent}?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
}): void;

Plunker

UPDATE:

This was not the case, what we did in the plunk together was eventually subscribe to the change events of the checkbox, and accordingly disable/enable the input field (leave the required validator on it, it'll be excluded from validation if it's disabled which is better than removing validators).

edited Jun 13, 2017 at 5:50

Shailesh Ladumor

7,2515 gold badges44 silver badges60 bronze badges

answered Jun 12, 2017 at 11:29

Amit

4,35323 silver badges25 bronze badges

5 Comments

Amit Over a year ago

Just call control.get('has_not_visited_in_days_input').updateValueAndValidity({ onlySelf: false, emitEvent: false});

Amit Over a year ago

Maybe something else is still invalid?

Shailesh Ladumor Over a year ago

once i add value into input and uncheck then form is valid

Amit Over a year ago

Maybe post a plunk?

Shailesh Ladumor Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

remove custom validation dynamic into Angular 2

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest