Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Aug 7, 2017

Conversation

Projects
None yet
5 participants
@kara
Copy link
Contributor

kara commented Aug 3, 2017

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.

@kara kara added the PR state: WIP label Aug 3, 2017

@googlebot googlebot added the cla: yes label Aug 3, 2017

@kara kara force-pushed the kara:onSubmit branch from d1dc3d9 to 61bfee6 Aug 3, 2017

@googlebot

This comment has been minimized.

Copy link

googlebot commented Aug 3, 2017

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.

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

@mary-poppins

This comment has been minimized.

Copy link

mary-poppins commented Aug 3, 2017

@kara kara force-pushed the kara:onSubmit branch from 61bfee6 to 931099b Aug 3, 2017

@googlebot

This comment has been minimized.

Copy link

googlebot commented Aug 3, 2017

CLAs look good, thanks!

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

@kara kara force-pushed the kara:onSubmit branch from 931099b to bf8e553 Aug 3, 2017

@mary-poppins

This comment has been minimized.

Copy link

mary-poppins commented Aug 3, 2017

@tinayuangao
Copy link
Contributor

tinayuangao left a comment

LGTM

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

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

This comment has been minimized.

Copy link
@tinayuangao

tinayuangao Aug 4, 2017

Contributor

Add docs for 'submit' somewhere?

This comment has been minimized.

Copy link
@kara

kara Aug 4, 2017

Author Contributor

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

@@ -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);

This comment has been minimized.

Copy link
@tinayuangao

tinayuangao Aug 4, 2017

Contributor

nit: add types for updated and child?

@kara kara force-pushed the kara:onSubmit branch 3 times, most recently from 5b381c6 to 73668d5 Aug 4, 2017

@mary-poppins

This comment has been minimized.

Copy link

mary-poppins commented Aug 4, 2017

@kara kara force-pushed the kara:onSubmit branch from 73668d5 to 0fe4ea5 Aug 4, 2017

@tinayuangao
Copy link
Contributor

tinayuangao left a comment

LGTM

@mary-poppins

This comment has been minimized.

Copy link

mary-poppins commented Aug 4, 2017

@mary-poppins

This comment has been minimized.

Copy link

mary-poppins commented Aug 4, 2017

@mary-poppins

This comment has been minimized.

Copy link

mary-poppins commented Aug 4, 2017

@vicb

This comment has been minimized.

Copy link
Contributor

vicb commented Aug 7, 2017

blocked on tap/164475104

@kara kara removed the PR state: blocked label Aug 7, 2017

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

5 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
cla/google All necessary CLAs are signed
code-review/pullapprove Approved by tinayuangao
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

kara added a commit to kara/angular that referenced this pull request Aug 8, 2017

feat(forms): add updateOn support to ngModelOptions
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).

kara added a commit to kara/angular that referenced this pull request Aug 8, 2017

feat(forms): add updateOn support to ngModelOptions
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).

kara added a commit to kara/angular that referenced this pull request Aug 8, 2017

feat(forms): add updateOn support to ngModelOptions
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).

kara added a commit to kara/angular that referenced this pull request Aug 8, 2017

feat(forms): add updateOn support to ngModelOptions
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).

kara added a commit to kara/angular that referenced this pull request Aug 8, 2017

feat(forms): add updateOn support to ngModelOptions
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).

kara added a commit to kara/angular that referenced this pull request Aug 9, 2017

feat(forms): add updateOn support to ngModelOptions
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).

kara added a commit to kara/angular that referenced this pull request Aug 10, 2017

feat(forms): add updateOn support to ngModelOptions
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).

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

hansl added a commit that referenced this pull request Aug 15, 2017

feat(forms): add updateOn support to ngModelOptions
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).

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

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

feat(forms): add updateOn support to ngModelOptions
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).

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

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

feat(forms): add updateOn support to ngModelOptions
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).

@kara kara deleted the kara:onSubmit branch Oct 13, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.