feat(forms): add updateOn blur option to FormControls #18408

kara · 2017-07-29T00:11:11Z

By default, the value and validation status of a FormControl updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive.

This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the updateOn option to blur when instantiating the FormControl.

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Like in AngularJS, setting updateOn to blur will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values).

This is just the first PR. Upcoming PRs will address:

Other updateOn values, like submit
Setting updateOn at a form-wide or application-wide level
Support in template-driven forms
Option for skipping initial validation run or more global error display configuration
Better support of reactive validation strategies

See more context in design doc.

mary-poppins · 2017-07-29T00:23:54Z

You can preview 1e1ff76 at https://pr18408-1e1ff76.ngbuilds.io/.

mary-poppins · 2017-07-29T02:52:36Z

You can preview 8296d32 at https://pr18408-8296d32.ngbuilds.io/.

mary-poppins · 2017-07-31T19:57:11Z

You can preview c3c692e at https://pr18408-c3c692e.ngbuilds.io/.

tinayuangao

LGTM

tinayuangao · 2017-07-31T23:34:57Z

packages/forms/src/model.ts

@@ -78,11 +78,15 @@ function coerceToAsyncValidator(
                                             origAsyncValidator || null;
 }

+export type FormHooks = 'change' | 'blur';


nit: do we want to add some docs for this?

Normally yes, but this isn't actually exported by the forms module as part of the public API. This is just exported so the type can be used elsewhere internally.

Re docs in general, I'm working on another PR to update the form validation guide with an extended section on this.

tinayuangao · 2017-07-31T23:36:50Z

packages/forms/test/form_control_spec.ts

+      it('should default to onChange with an options obj', () => {
+        const c = new FormControl('', {validators: Validators.required});
+        expect(c._updateOn).toEqual('change');
+      });


Also test when {updateOn: 'blur'}, c._updateOn's value is correct?

Good call; will add a test.

By default, the value and validation status of a `FormControl` updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the `updateOn` option to `blur` when instantiating the `FormControl`. ```ts // example without validators const c = new FormControl(, { updateOn: blur }); // example with validators const c= new FormControl(, { validators: Validators.required, updateOn: blur }); ``` Like in AngularJS, setting `updateOn` to `blur` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Closes angular#7113

mary-poppins · 2017-08-01T22:28:10Z

You can preview dc62ecb at https://pr18408-dc62ecb.ngbuilds.io/.

cexbrayat · 2017-08-03T15:27:06Z

@kara Looks like we can pass the updateOn: 'blur' option to a FormGroup too, but it doesn't have any effect? It may be a bug, or that shouldn't be possible as it's misleading. Probably the same with FormArray.

Also, is it on purpose that the control (and group, and array) methods of the FormBuilder don't accept AbstractControlOptions?

kara · 2017-08-03T18:02:29Z

@cexbrayat This feature is still in development; this is just the first PR :). You may want to check out the PR desc and its linked design doc for more context on what's coming next. To answer your question, yes, updateOn will be coming to FormGroups and FormArrays in an upcoming PR.

cexbrayat · 2017-08-03T18:33:22Z

@kara Thank you for your answer. I did read the design doc and did not see the answers to these questions, that's why I dared to ask (but maybe I missed it). Great if it comes in a following PR, I'm looking forward to try it!

By default, the value and validation status of a `FormControl` updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the `updateOn` option to `blur` when instantiating the `FormControl`. ```ts // example without validators const c = new FormControl(, { updateOn: blur }); // example with validators const c= new FormControl(, { validators: Validators.required, updateOn: blur }); ``` Like in AngularJS, setting `updateOn` to `blur` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Closes angular#7113

This commit introduces a new option to template-driven forms that improves performance by delaying form control updates until the "blur" or "submit" event. To use it, set the `updateOn` property in `ngModelOptions`. ```html <input ngModel [ngModelOptions]="{updateOn: blur}"> ``` Like in AngularJS, setting `updateOn` to `blur` or `submit` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Upcoming PRs will address: * Support for setting group-level `updateOn` in template-driven forms * Option for skipping initial validation run or more global error display configuration * Better support of reactive validation strategies See more context in angular#18408, angular#18514, and the [design doc](https://docs.google.com/document/d/1dlJjRXYeuHRygryK0XoFrZNqW86jH4wobftCFyYa1PA/edit#heading=h.r6gn0i8f19wz).

By default, the value and validation status of a `FormControl` updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the `updateOn` option to `blur` when instantiating the `FormControl`. ```ts // example without validators const c = new FormControl(, { updateOn: blur }); // example with validators const c= new FormControl(, { validators: Validators.required, updateOn: blur }); ``` Like in AngularJS, setting `updateOn` to `blur` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Closes angular#7113

This commit introduces a new option to template-driven forms that improves performance by delaying form control updates until the "blur" or "submit" event. To use it, set the `updateOn` property in `ngModelOptions`. ```html <input ngModel [ngModelOptions]="{updateOn: blur}"> ``` Like in AngularJS, setting `updateOn` to `blur` or `submit` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Upcoming PRs will address: * Support for setting group-level `updateOn` in template-driven forms * Option for skipping initial validation run or more global error display configuration * Better support of reactive validation strategies See more context in #18408, #18514, and the [design doc](https://docs.google.com/document/d/1dlJjRXYeuHRygryK0XoFrZNqW86jH4wobftCFyYa1PA/edit#heading=h.r6gn0i8f19wz).

By default, the value and validation status of a `FormControl` updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the `updateOn` option to `blur` when instantiating the `FormControl`. ```ts // example without validators const c = new FormControl(, { updateOn: blur }); // example with validators const c= new FormControl(, { validators: Validators.required, updateOn: blur }); ``` Like in AngularJS, setting `updateOn` to `blur` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Closes angular#7113

This commit introduces a new option to template-driven forms that improves performance by delaying form control updates until the "blur" or "submit" event. To use it, set the `updateOn` property in `ngModelOptions`. ```html <input ngModel [ngModelOptions]="{updateOn: blur}"> ``` Like in AngularJS, setting `updateOn` to `blur` or `submit` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Upcoming PRs will address: * Support for setting group-level `updateOn` in template-driven forms * Option for skipping initial validation run or more global error display configuration * Better support of reactive validation strategies See more context in angular#18408, angular#18514, and the [design doc](https://docs.google.com/document/d/1dlJjRXYeuHRygryK0XoFrZNqW86jH4wobftCFyYa1PA/edit#heading=h.r6gn0i8f19wz).

By default, the value and validation status of a `FormControl` updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the `updateOn` option to `blur` when instantiating the `FormControl`. ```ts // example without validators const c = new FormControl(, { updateOn: blur }); // example with validators const c= new FormControl(, { validators: Validators.required, updateOn: blur }); ``` Like in AngularJS, setting `updateOn` to `blur` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Closes angular#7113

This commit introduces a new option to template-driven forms that improves performance by delaying form control updates until the "blur" or "submit" event. To use it, set the `updateOn` property in `ngModelOptions`. ```html <input ngModel [ngModelOptions]="{updateOn: blur}"> ``` Like in AngularJS, setting `updateOn` to `blur` or `submit` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Upcoming PRs will address: * Support for setting group-level `updateOn` in template-driven forms * Option for skipping initial validation run or more global error display configuration * Better support of reactive validation strategies See more context in angular#18408, angular#18514, and the [design doc](https://docs.google.com/document/d/1dlJjRXYeuHRygryK0XoFrZNqW86jH4wobftCFyYa1PA/edit#heading=h.r6gn0i8f19wz).

angular-automatic-lock-bot · 2019-09-14T04:22:09Z

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

googlebot added the cla: yes label Jul 29, 2017

kara assigned IgorMinar and tinayuangao Jul 29, 2017

kara added action: review The PR is still awaiting reviews from at least one requested reviewer state: blocked labels Jul 29, 2017

kara force-pushed the onBlur branch from 1e1ff76 to 8296d32 Compare July 29, 2017 02:39

kara force-pushed the onBlur branch from 8296d32 to c3c692e Compare July 31, 2017 18:37

kara removed the state: blocked label Jul 31, 2017

tinayuangao approved these changes Jul 31, 2017

View reviewed changes

Toxicable mentioned this pull request Aug 1, 2017

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

Closed

kara force-pushed the onBlur branch from c3c692e to dc62ecb Compare August 1, 2017 22:09

kara added action: merge The PR is ready for merge by the caretaker target: major This PR is targeted for the next major release and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Aug 1, 2017

vicb merged commit 333a708 into angular:master Aug 3, 2017

This was referenced Aug 3, 2017

feat(forms): add updateOn submit option to FormControls #18514

Merged

feat(forms): add default updateOn values to groups and arrays #18536

Merged

kara mentioned this pull request Aug 8, 2017

feat(forms): support updateOn in ngModelOptions #18577

Merged

kara deleted the onBlur branch October 13, 2018 01:08

angular-automatic-lock-bot bot unassigned tinayuangao Sep 14, 2019

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): add updateOn blur option to FormControls #18408

feat(forms): add updateOn blur option to FormControls #18408

kara commented Jul 29, 2017 •

edited

Loading

mary-poppins commented Jul 29, 2017

mary-poppins commented Jul 29, 2017

mary-poppins commented Jul 31, 2017

tinayuangao left a comment

tinayuangao Jul 31, 2017

kara Jul 31, 2017

kara Jul 31, 2017

tinayuangao Jul 31, 2017

kara Jul 31, 2017

mary-poppins commented Aug 1, 2017

cexbrayat commented Aug 3, 2017

kara commented Aug 3, 2017 •

edited

Loading

cexbrayat commented Aug 3, 2017 •

edited

Loading

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

feat(forms): add updateOn blur option to FormControls #18408

feat(forms): add updateOn blur option to FormControls #18408

Conversation

kara commented Jul 29, 2017 • edited Loading

mary-poppins commented Jul 29, 2017

mary-poppins commented Jul 29, 2017

mary-poppins commented Jul 31, 2017

tinayuangao left a comment

Choose a reason for hiding this comment

tinayuangao Jul 31, 2017

Choose a reason for hiding this comment

kara Jul 31, 2017

Choose a reason for hiding this comment

kara Jul 31, 2017

Choose a reason for hiding this comment

tinayuangao Jul 31, 2017

Choose a reason for hiding this comment

kara Jul 31, 2017

Choose a reason for hiding this comment

mary-poppins commented Aug 1, 2017

cexbrayat commented Aug 3, 2017

kara commented Aug 3, 2017 • edited Loading

cexbrayat commented Aug 3, 2017 • edited Loading

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

kara commented Jul 29, 2017 •

edited

Loading

kara commented Aug 3, 2017 •

edited

Loading

cexbrayat commented Aug 3, 2017 •

edited

Loading