ReactiveForms: Changing Validators doesn't trigger recalculation of form/field statuses

[rfuhrer]

🐞 bug report

Affected Package

The issue is caused by package @angular/Forms

Is this a regression?

Not that I know of.

Description

When you change a field's validators inside a form it should recalculate the forms status using the new rules. Currently it seems to stay with whatever status it had before until you touch that field again.

My issue is that I have a form with a field that's required when conditions are met, but if those conditions aren't met then I don't even show it to the user. Now if the user doesn't fill out this field and then changes the conditions to make it hidden again, the form is stuck "INVALID" because even though I cleared the validators and hid that control, it still has a status of invalid. Now the user can't do anything to fix the issue and even this.form.errors is empty.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-7dhmgp

🌍 Your Environment

Angular Version:

Angular CLI: 7.2.1
Node: 11.2.0
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.1
@angular/cdk                      7.2.1
@angular/cli                      7.2.1
@angular/flex-layout              7.0.0-beta.23
@angular/material                 7.2.1
@ngtools/webpack                  7.2.1
@schematics/angular               7.2.1
@schematics/update                0.12.1
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

[manklu]

You can trigger validation manually

clearValidator(){
  this.form.get('item').clearValidators();
  this.form.get('item').updateValueAndValidity();
}

[rfuhrer]

Thanks, I was working around it by patching the value back in. Your way seems cleaner.

I guess the question is, should you have to do this? Or should changing validators trigger it automatically?

[kara]

@rfuhrer As @manklu mentioned, validation should be triggered manually. This is by design, so setting validators isn't coupled to when validation actually runs. If it ran automatically, then there'd be no way to control that timing. Closing this issue, as it works as expected.

(That said, we might want to call out this behavior explicitly in the setValidators docs - perhaps open a docs issue or PR to make this more obvious in the docs? )

[rfuhrer]

Thanks @kara . I was thinking that changing validators would queue up a re-validation during the next digest cycle. That way if you set 10 validators you don't trigger 10 recalculations, but just 1 once the UI is good to go again. Seems like the best of both worlds (intuitive but still performant), but I can see how leaving it manual lets people do whatever they want.

I think it should be in the docs as the current behaviour can be quite confusing if you just assumed ReactiveForms are "reacting" to your changes. I'm not in a huge rush to put my time into making a pull request based on my previous experience (#20430 -> #20610) but if I have some free time I'll try to make one.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}