feat(forms): update validity on touched #13832

SystemDisc · 2017-01-07T16:04:19Z

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

I'm not sure if adding tests or changing the docs is necessary for this change, let me know.

What kind of change does this PR introduce?

What is the current behavior?
#7113
The current behavior is that validators are only called when form values change.

What is the new behavior?
Validators are called onTouched (onBlur).

Does this PR introduce a breaking change?

Yes
No

Other information:
Running validators onTouched (onBlur), allows a validators that only run once the user has moved on to the next input.

For example:

export function trim(control: AbstractControl): {[key: string]: any} {
	if (control.touched && String(control.value).match(/^\s+|\s+$/)) {
		control.setValue(String(control.value).replace(/^\s+|\s+$/, ''));
		control.markAsUntouched();
	}
	return null;
}

closes #7113

DzmitryShylovich · 2017-01-07T16:07:47Z

To me it doesn't address the original issue

Angular2 Forms Controls validation "OnLostFocus (OnBlur)" rather than "OnChange"

in this case it will validate on both blur and change

SystemDisc · 2017-01-07T16:10:22Z

No, you're right. It only adds validation checking on blur. It doesn't replace validation checking on change.

What would be an appropriate way to allow people to configure what triggers validation? I don't think it would be hard to add the option to have form validation run (1) on change, (2) on blur, or (3) on change and on blur.

SystemDisc · 2017-01-07T16:23:19Z

Perhaps the FormControl constructor could have an options parameter added, where you can specify something like:

new FormControl('name', validator, asyncValidator, {validateEvent: 'blur'});
new FormControl('name', validator, asyncValidator, {validateEvent: 'change'});
new FormControl('name', validator, asyncValidator, {validateEvent: ['blur', 'change']});

or maybe just a validateEvent parameter:

new FormControl('name', validator, asyncValidator, 'blur');
new FormControl('name', validator, asyncValidator, 'change');
new FormControl('name', validator, asyncValidator, ['blur', 'change']);

I'm not exactly sure how that would be implemented, but I'm pretty sure I could figure it out.

SystemDisc · 2017-01-09T03:44:00Z

Once I get an update on this, I can make the necessary changes to close #7113

mattdistefano · 2017-01-19T04:19:09Z

modules/@angular/forms/src/directives/shared.ts

@@ -47,7 +47,10 @@ export function setUpControl(control: FormControl, dir: NgControl): void {
  });

  // touched
-  dir.valueAccessor.registerOnTouched(() => control.markAsTouched());
+  dir.valueAccessor.registerOnTouched(() => {
+    control.updateValueAndValidity();


If the validation is already running on change, which will happen before the blur, will this ever produce a different value or validity than the control already has?

I'm not sure I understand what you mean. It seems you're implying that a change event gets fired on blur no matter what. This is not true.

If I'm understanding what you're getting at, the answer would be: No, the value that gets checked on blur would be the same value that got checked on the last change, but I think you can add if (control.touched) in your ValidatorFn to have code that only runs if the control has been blurred. That code wouldn't run on blur without this change - only the next time the control value changed.

What I'm saying is running the validation on blur seems superfluous if it's already running on change, because the control would have the same value on blur that it did on the last change.

Unless you want your validator to run on blur and you check for something like control.touched

Ah yeah that's a good point. Probably was too early for me to replying to these things.

mhevery · 2017-01-28T04:43:18Z

Could we have some tests?

SystemDisc · 2017-01-28T12:57:10Z

I'm waiting for a consensus to be achieved in #7113 before I correct this PR. Once that happens, I'd be more than happy to add some extra tests.

mhevery · 2017-02-10T21:40:06Z

@kara can you comment

kara · 2017-03-09T02:13:39Z

As it stands, we'd be adding another full validation run for everyone on both value change and on blur (regardless of if the value changed). Not everyone will want / need this extra run.

The proper resolution for #7113 needs a lot more thought. Specifically, a design doc that covers more use cases. I think we should close this until this has gone through a design review.

angular-automatic-lock-bot · 2019-09-11T00:20:59Z

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.}

feat(forms): update validity on touched

f1ee29e

closes #7113

googlebot added the cla: yes label Jan 7, 2017

SystemDisc mentioned this pull request Jan 9, 2017

Angular2 Forms Controls validation "OnLostFocus (OnBlur)" rather than "OnChange" #7113

Closed

pkozlowski-opensource added the area: forms label Jan 10, 2017

mattdistefano reviewed Jan 19, 2017

View reviewed changes

kara closed this Mar 9, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): update validity on touched #13832

feat(forms): update validity on touched #13832

SystemDisc commented Jan 7, 2017 •

edited

Loading

DzmitryShylovich commented Jan 7, 2017

SystemDisc commented Jan 7, 2017 •

edited

Loading

SystemDisc commented Jan 7, 2017 •

edited

Loading

SystemDisc commented Jan 9, 2017

mattdistefano Jan 19, 2017

SystemDisc Jan 19, 2017 •

edited

Loading

mattdistefano Jan 19, 2017

SystemDisc Jan 19, 2017

mattdistefano Jan 19, 2017

mhevery commented Jan 28, 2017

SystemDisc commented Jan 28, 2017 •

edited

Loading

mhevery commented Feb 10, 2017

kara commented Mar 9, 2017

angular-automatic-lock-bot bot commented Sep 11, 2019

feat(forms): update validity on touched #13832

feat(forms): update validity on touched #13832

Conversation

SystemDisc commented Jan 7, 2017 • edited Loading

DzmitryShylovich commented Jan 7, 2017

SystemDisc commented Jan 7, 2017 • edited Loading

SystemDisc commented Jan 7, 2017 • edited Loading

SystemDisc commented Jan 9, 2017

mattdistefano Jan 19, 2017

Choose a reason for hiding this comment

SystemDisc Jan 19, 2017 • edited Loading

Choose a reason for hiding this comment

mattdistefano Jan 19, 2017

Choose a reason for hiding this comment

SystemDisc Jan 19, 2017

Choose a reason for hiding this comment

mattdistefano Jan 19, 2017

Choose a reason for hiding this comment

mhevery commented Jan 28, 2017

SystemDisc commented Jan 28, 2017 • edited Loading

mhevery commented Feb 10, 2017

kara commented Mar 9, 2017

angular-automatic-lock-bot bot commented Sep 11, 2019

SystemDisc commented Jan 7, 2017 •

edited

Loading

SystemDisc commented Jan 7, 2017 •

edited

Loading

SystemDisc commented Jan 7, 2017 •

edited

Loading

SystemDisc Jan 19, 2017 •

edited

Loading

SystemDisc commented Jan 28, 2017 •

edited

Loading