Angular reactive forms input is valid if pristine even if setValidators set to required

Question

I need to programmatically change the validators of an input in a Angular Reactive Form.

So I init the form:

...
limitNumber: [{ value: null, disabled: (this.id ? true : false) }]
...

And later on I enable the input and change its validators to be required:

this.newEventForm.get('limitNumber').enable();
this.newEventForm.get('limitNumber').setValidators(Validators.required);

Right after this, the state of the input is VALID as long as it stays pristine. If I edit the input value and erase then it becomes 'INVALID'.

My problem is that I need the input to be invalid as soon as I set its validators to required even if pristine.

How can I do ?

***** EDIT *****

My goal is to be able to make an input to be required conditionally. Imagine the user creates an event. In the new event form it can choose to set a maximum number of participants. If the user toggles the input (lets call it 'isLimited') then I need a new input, to enter this numerical limit, which gets enabled (lets call it 'limitNumber' input) which hence must be filled.

So my ultimate goal is to make this input "required" only if the 'isLimited' input is toggled true

why do you need such a feature what is the ulitmate goal here , may be there is another easy way. — Rahul Singh
– Rahul Singh, Commented Aug 7, 2017 at 16:47
you need to get that formControl and then mark it as touched that might help like this this.formControl.control.markAsUntouched({onlySelf: true}); — Rahul Singh
– Rahul Singh, Commented Aug 7, 2017 at 16:49
@RahulSingh I tried Untouched, Touched and Dirty without success. See my edit in my post which explains the ultimate goal. Hope it's more clear — Manuel RODRIGUEZ
– Manuel RODRIGUEZ, Commented Aug 7, 2017 at 17:31

Manuel RODRIGUEZ · Accepted Answer · 2017-08-07 17:40:54Z

1

I just had to use the following code to check validity:

this.newEventForm.get('limitNumber').updateValueAndValidity();

answered Aug 7, 2017 at 17:40

Manuel RODRIGUEZ

2,1913 gold badges29 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Angular reactive forms input is valid if pristine even if setValidators set to required

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related