Form validators re-run on view (re)creation

[lazarljubenovic]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When the directive associated with a form control is created in the view, validators are triggered.

Expected behavior

Validators should not be triggered when the view changes. Reactive forms should not be tied to the way they are represented in the view. Their source of truth should be the model.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-reactive-forms-issue?file=app/app.component.ts

1. Open console.
2. Use the Toggle visiblity button to confirm that validators are running on each control directive creation.

What is the motivation / use case for changing the behavior?

3. Continue from above steps.
4. Press set errors manually to insert an error manually (this is mocking manually setting an error after validation is returned from backend)
5. Press Toggle visiblity to make it disappear. Nothing happens in console.
6. Press it again to make the control appear. Notice that console logs, which means that validators is running.

Observe the fact that error message is now gone. Toggling the view is mocking the use-case of having a mulitpart form.

---

If this is by design, I don't see a reason for it. We're creating a view where we write data form model to view. The action of reading from model should not trigger validators, as far as I understand. As I see it, validators should be run when the FormControl instances are created in the model. Why are validators triggered when value did not change?

Environment

Angular version: 4.3.6

[ghetolay]

Yes sounds right.
A change in the view should not affect the model in reactive forms and no change on the model shouldn't trigger validation.

I've pin point it to

angular/packages/forms/src/directives/reactive_directives/form_group_directive.ts

Lines 98 to 104 in 17eaef0

	addControl(dir: FormControlName): FormControl {
	const ctrl: any = this.form.get(dir.path);
	setUpControl(ctrl, dir);
	ctrl.updateValueAndValidity({emitEvent: false});
	this.directives.push(dir);
	return ctrl;
	}

It's always running a new validation run (updateValueAndValidity()), while it only should do it if there was new validators introduced by the control directive.

Also renaming the function into addControlDirective() may reduce confusion on what it's doing.

May be somehow related to #14376 has it's both about editing the view on a reactive form and looks like FormGroupDirective is at fault.

[maciejgoscinski]

Bump. It's still relevant in 2021.

Having a visibility change re-trigger built-in validators (resulting with custom errors getting cleared) kind of defeats the purpose of having an ability to setErrors() in a custom manner. Especially in a case where my form fields have no Validators assigned to them and I rely solely on custom form-wide validation (in our case it's schema based and maps schema errors to individual fields on init and on valueChanges).

[DaSchTour]

That's a really annoying behavior. I would have expected that form controls keep their state. I have an application where I attach existing FormControls to the template on user interaction and wanted to save the error inside the FormControl. But as it is reseted on change I have to build my own FormControls or store the errors somewhere else and calculate validity from different sources 😞