Calling markAsTouched on a FormGroup doesn't affect children controls

[jabas06]

**I'm submitting a bug report.

Current behavior
Calling markAsTouched on a FormGroup doesn't mark their children controls as touched.

Expected behavior
Calling markAsTouched on a FormGroup should set the touched flag of their children controls. Actually, the opposite method, markAsUntouched, is affecting the children controls.

Why markAsTouched doesn't work the same way?

Minimal reproduction of the problem with instructions
Repro:
http://plnkr.co/edit/CgjaYHgfzdEqCyTCud8N?p=preview

What is the motivation / use case for changing the behavior?
I have some styles that rely on the touched state. In some cases and need to set manually the touched state for all the controls, for example, after the user clicks on the save button.

• Angular version:
  2.1

[pkozlowski-opensource]

This is duplicate of #11774, see the detailed discussion in the referenced issue.

[DzmitryShylovich]

Works as intended https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/model.ts#L244

[touqeershafi]

I've got the same problem in angular4x markAsTouched() is not working!

<form #addFieldForm="ngForm">

@ViewChild('addFieldForm') addFieldForm: NgForm;

if (!this.addFieldForm.valid) {

      //this.addFieldForm.form.markAsTouched(); <--- This not working
      this.addFieldForm.controls['name'].markAsTouched(true); // Manually triggers work for each control
      this.addFieldForm.controls['dataType'].markAsTouched(true); // Manually triggers work for each control
      return false
    }

Any update on the issue ?

[Khalav]

This does not work either.

ngOnInit() {
    let controls = this.myForm.controls;

    _.forEach(controls, control => {
        control.markAsTouched(true);
        control.markAsDirty(true);
    });
}

[AlexzundeR]

This works in Angular2:

 for (let inner in this.form.controls) {
            this.form.get(inner).markAsTouched();
            this.form.get(inner).updateValueAndValidity();
        }

This solution can be expanded to process full form's tree by recursion.

[Khalav]

Angular4x

Trying to use your code @AlexzundeR throws me the following error:
Property 'get' does not exist on type 'NgForm'.

My form var is declared this way:

@ViewChild('f') myForm: ngForm;

ngOnInit() {
    for (let inner in this.myForm.controls) {
        this.myForm.get(inner).markAsTouched();
        this.myForm.get(inner).updateValueAndValidity();
    }
}

[AlexzundeR]

@Khalav , I'm sorry, I have not declared that form in this contex is a FormGroup object from Reactive forms.

[Ismaestro]

I don't want to make recursion :((
I want a method for this!!
Or maybe an extra parameter that affects children as well...

control.markAsTouched({propagateChildren: true})

[Ismaestro]

Okey,

export const markFormGroupTouched = (formGroup) => {
  (<any>Object).values(formGroup.controls).forEach(control => {
    control.markAsTouched();

    if (control.controls) {
      markFormGroupTouched(control);
    }
  });
};

[zelwyn]

This works in Angular2:

 for (let inner in this.form.controls) {
            this.form.get(inner).markAsTouched();
            this.form.get(inner).updateValueAndValidity();
        }

This solution can be expanded to process full form's tree by recursion.

Works, ty

[cristianmartinez]

I know this is an old issue, but i just want to let you know angular 8 now brings to us additional api methods for descendants controls.

https://angular.io/api/forms/AbstractControl#markAllAsTouched

[angular-automatic-lock-bot]

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