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

Add a markAllTouched method to AbstractControl #19400

Closed
shairez opened this Issue Sep 26, 2017 · 7 comments

Comments

Projects
None yet
6 participants
@shairez
Copy link
Contributor

shairez commented Sep 26, 2017

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

To show all the form error messages, we need to implement ourselves a recursive function marking all form controls as touched.

Expected behavior

Having a markAllTouched method like @kara Suggested on #11774 would solve this problem.
Recursively marking all children of an AbstractControl as touched.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

When a user submits a form, we want a quick way to display all the invalidation messages at once.

This is a common use case for forms submissions, having to know upfront all the problematic form fields you need to fix.

Environment


Angular version: 4.4.3

@vicb vicb added the comp: forms label Sep 26, 2017

@Splaktar

This comment has been minimized.

Copy link
Member

Splaktar commented Sep 28, 2017

This is what I currently do in a number of different projects:

  validateFormAndDisplayErrors(form: FormGroup) {
    Object.keys(form.controls).map((controlName) => {
      form.get(controlName).markAsTouched({onlySelf: true});
    });
  }

But it would certainly be nice if this was part of the framework as there may be a more efficient way of doing this. For example, this may be going only 1 level deep where it would be nice to have it go down the whole tree as mentioned in the OP.

@dominique-mueller

This comment has been minimized.

Copy link

dominique-mueller commented Sep 29, 2017

Related to #11774

@shairez

This comment has been minimized.

Copy link
Contributor Author

shairez commented Sep 29, 2017

@dominique-mueller thanks, yep, I also mentioned it in the issue itself

@dominique-mueller

This comment has been minimized.

Copy link

dominique-mueller commented Sep 30, 2017

Ah yes, overlooked that one 👍
Isn't this issue a duplicate then?

@shairez

This comment has been minimized.

Copy link
Contributor Author

shairez commented Sep 30, 2017

Not really, because that issue talks about changing current behavior.

I'm suggesting to add a new method

@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2018

@juracy

This comment has been minimized.

Copy link

juracy commented Jul 4, 2018

My current helper for this (with nested group support):

import { FormGroup } from '@angular/forms'

export function markAllTouched(form: FormGroup) {
  Object.keys(form.controls).forEach(field => {
    const control = form.get(field)
    control.markAsTouched({ onlySelf: true })
    if (control instanceof FormGroup) {
      markAllTouched(control)
    }
  })
}
@Splaktar

This comment has been minimized.

Copy link
Member

Splaktar commented Oct 28, 2018

For anyone looking for more explanation, examples, and edge case handling of this, Loaine's blog post on this is quite good.

alsami added a commit to alsami/angular that referenced this issue Oct 29, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Oct 30, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

fix: adjust public api of forms to satisfy bazel build

feat(forms): add tests for `markAllAsTouched()`

Add tests to validate the behavior

feat(forms): Adjust tests for `markAllAsTouched()`

feat(forms): use  in

feat(forms): invert if statement in `markAllAsTouched()`

alsami added a commit to alsami/angular that referenced this issue Oct 30, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Oct 30, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Nov 12, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 17, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 17, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 17, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 17, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 17, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 19, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 19, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 22, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Dec 28, 2018

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Jan 10, 2019

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

alsami added a commit to alsami/angular that referenced this issue Jan 12, 2019

feat(forms): add `markAllAsTouched()` to `AbstractControl`
Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

@alxhub alxhub closed this in 45bf911 Jan 18, 2019

ngfelixl added a commit to ngfelixl/angular that referenced this issue Jan 28, 2019

feat(forms): add `markAllAsTouched()` to `AbstractControl` (angular#2…
…6812)

Add functionality to mark a control and its descendant controls as touched

Closes angular#19400

PR Close angular#26812
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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.