Skip to content

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

Merged
vicb merged 1 commit into
angular:masterfrom
kara:onSubmit
Aug 7, 2017
Merged

vicb merged 1 commit into
angular:masterfrom
kara:onSubmit

Conversation

@kara

@kara kara commented Aug 3, 2017 •

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

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

Copy link
Copy Markdown

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

@googlebot

Copy link
Copy Markdown

CLAs look good, thanks!

@mary-poppins

Copy link
Copy Markdown

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

@kara 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 tinayuangao left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Comment thread packages/forms/src/model.ts Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add docs for 'submit' somewhere?

@kara kara Aug 4, 2017 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/forms/src/model.ts Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: add types for updated and child?

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

Copy link
Copy Markdown

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

@tinayuangao tinayuangao left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mary-poppins

Copy link
Copy Markdown

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

@mary-poppins

Copy link
Copy Markdown

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

@mary-poppins

Copy link
Copy Markdown

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

@kara 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
@vicb

vicb commented Aug 7, 2017 •

Copy link
Copy Markdown
Contributor

blocked on tap/164475104

@vicb
vicb merged commit f69561b into angular:master Aug 7, 2017
kara added a commit to kara/angular that referenced this pull request Aug 10, 2017
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 pushed a commit to asnowwolf/angular that referenced this pull request Aug 11, 2017
hansl pushed a commit that referenced this pull request Aug 15, 2017
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 pushed a commit to juleskremer/angular that referenced this pull request Aug 26, 2017
juleskremer pushed a commit to juleskremer/angular that referenced this pull request Aug 26, 2017
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 pushed a commit to juleskremer/angular that referenced this pull request Aug 28, 2017
juleskremer pushed a commit to juleskremer/angular that referenced this pull request Aug 28, 2017
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 onSubmit branch October 13, 2018 01:08
@angular-automatic-lock-bot

Copy link
Copy Markdown

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.

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Sep 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: forms cla: yes target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants