Angular 2 - Mark nested formbuilder as Touched

Question

I have the following problem: in my application I havea huge form with nested formbuilder in it, it works great and everything but when the user submits the form I want to mark the full form as Touched (to run validations), the code is the

constructor(private fb: FormBuilder) {
    this.form= fb.group({
        field1: [null],
        field2: [null],
        nestedForm1: fb.group({
            field3: [null, Validators.required],
            field4: [null]
        }),
        nestedForm2: fb.group({
            field5: [null, Validators.required],
            field6: [null, Validators.required]
        })
    });
}

And when I run:

this.form.markAsTouched();

Only Field1 & Field2 get marked, is there a way I'm missing to do it?

Answer 1

you can create a custom method like below:

 setAsTouched(group: FormGroup | FormArray) {
  group.markAsTouched()
  for (let i in group.controls) {
    if (group.controls[i] instanceof FormControl) {
      group.controls[i].markAsTouched();
    } else {
      this.setAsTouched(group.controls[i]);
    }
   }
 }