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

kara · 2017-08-03T20:56:53Z

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. #18408 introduced an updateOn configuration to help improve performance by delaying form control updates until "blur".

This commit introduces another updateOn option based on the "submit" event of the parent form. To use it, set the updateOn option to submit when instantiating the FormControl.

const form = new FormGroup({
   name: new FormControl('', { 
      validators: Validators.required,
      updateOn: 'submit' 
   })
});

Like in AngularJS, setting updateOn to 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:

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.

googlebot · 2017-08-03T21:07:17Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that they're okay with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

mary-poppins · 2017-08-03T21:07:23Z

You can preview d1dc3d9 at https://pr18514-d1dc3d9.ngbuilds.io/.

googlebot · 2017-08-03T21:08:03Z

CLAs look good, thanks!

mary-poppins · 2017-08-03T21:26:40Z

You can preview bf8e553 at https://pr18514-bf8e553.ngbuilds.io/.

tinayuangao

LGTM

tinayuangao · 2017-08-04T18:21:12Z

packages/forms/src/model.ts

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

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


Add docs for 'submit' somewhere?

Will be part of #18519 once docs examples can run off local builds / master

tinayuangao · 2017-08-04T18:22:17Z

packages/forms/src/model.ts

@@ -1405,6 +1433,14 @@ export class FormArray extends AbstractControl {
  }

  /** @internal */
+  _syncPendingControls(): boolean {
+    let subtreeUpdated = this.controls.reduce(
+        (updated, child) => { return child._syncPendingControls() ? true : updated; }, false);


nit: add types for updated and child?

mary-poppins · 2017-08-04T20:28:06Z

You can preview a23ed59 at https://pr18514-a23ed59.ngbuilds.io/.

tinayuangao

LGTM

mary-poppins · 2017-08-04T20:29:30Z

You can preview 5b381c6 at https://pr18514-5b381c6.ngbuilds.io/.

mary-poppins · 2017-08-04T20:35:18Z

You can preview 0fe4ea5 at https://pr18514-0fe4ea5.ngbuilds.io/.

mary-poppins · 2017-08-04T20:35:42Z

You can preview 73668d5 at https://pr18514-73668d5.ngbuilds.io/.

vicb · 2017-08-07T17:59:48Z

blocked on tap/164475104

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

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

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:13Z

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

kara added the state: WIP label Aug 3, 2017

googlebot added the cla: yes label Aug 3, 2017

kara added the state: blocked label Aug 3, 2017

kara force-pushed the onSubmit branch from d1dc3d9 to 61bfee6 Compare August 3, 2017 21:07

googlebot added cla: no and removed cla: yes labels Aug 3, 2017

kara force-pushed the onSubmit branch from 61bfee6 to 931099b Compare August 3, 2017 21:08

googlebot added cla: yes and removed cla: no labels Aug 3, 2017

kara force-pushed the onSubmit branch from 931099b to bf8e553 Compare August 3, 2017 21:17

kara removed the state: blocked label Aug 3, 2017

kara assigned tinayuangao Aug 4, 2017

kara added action: review The PR is still awaiting reviews from at least one requested reviewer and removed state: WIP labels Aug 4, 2017

tinayuangao reviewed Aug 4, 2017

View reviewed changes

kara force-pushed the onSubmit branch 3 times, most recently from 5b381c6 to 73668d5 Compare August 4, 2017 20:25

feat(forms): add updateOn submit option to FormControls

0fe4ea5

kara force-pushed the onSubmit branch from 73668d5 to 0fe4ea5 Compare August 4, 2017 20:28

tinayuangao approved these changes Aug 4, 2017

View reviewed changes

kara unassigned tinayuangao Aug 4, 2017

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 4, 2017

kara mentioned this pull request Aug 4, 2017

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

Merged

kara added the area: forms label Aug 7, 2017

vicb added the state: blocked label Aug 7, 2017

kara removed the state: blocked label Aug 7, 2017

vicb merged commit f69561b into angular:master Aug 7, 2017

kara mentioned this pull request Aug 8, 2017

feat(forms): support updateOn in ngModelOptions #18577

Merged

asnowwolf pushed a commit to asnowwolf/angular that referenced this pull request Aug 11, 2017

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

0b5b867

This was referenced Aug 12, 2017

angular validation focus,blur triggers #16412

Closed

Validate form on submission in reactive-form FormGroup #14527

Closed

juleskremer pushed a commit to juleskremer/angular that referenced this pull request Aug 26, 2017

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

5354d87

juleskremer pushed a commit to juleskremer/angular that referenced this pull request Aug 28, 2017

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

704cf9d

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

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 submit option to FormControls #18514

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

kara commented Aug 3, 2017 •

edited

Loading

googlebot commented Aug 3, 2017

mary-poppins commented Aug 3, 2017

googlebot commented Aug 3, 2017

mary-poppins commented Aug 3, 2017

tinayuangao left a comment

tinayuangao Aug 4, 2017

kara Aug 4, 2017 •

edited

Loading

tinayuangao Aug 4, 2017

mary-poppins commented Aug 4, 2017

tinayuangao left a comment

mary-poppins commented Aug 4, 2017

mary-poppins commented Aug 4, 2017

mary-poppins commented Aug 4, 2017

vicb commented Aug 7, 2017 •

edited

Loading

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

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

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

Conversation

kara commented Aug 3, 2017 • edited Loading

googlebot commented Aug 3, 2017

mary-poppins commented Aug 3, 2017

googlebot commented Aug 3, 2017

mary-poppins commented Aug 3, 2017

tinayuangao left a comment

Choose a reason for hiding this comment

tinayuangao Aug 4, 2017

Choose a reason for hiding this comment

kara Aug 4, 2017 • edited Loading

Choose a reason for hiding this comment

tinayuangao Aug 4, 2017

Choose a reason for hiding this comment

mary-poppins commented Aug 4, 2017

tinayuangao left a comment

Choose a reason for hiding this comment

mary-poppins commented Aug 4, 2017

mary-poppins commented Aug 4, 2017

mary-poppins commented Aug 4, 2017

vicb commented Aug 7, 2017 • edited Loading

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

kara commented Aug 3, 2017 •

edited

Loading

kara Aug 4, 2017 •

edited

Loading

vicb commented Aug 7, 2017 •

edited

Loading