Template Driven Form Mark All as touched - Angular 7

Question

I am using template driven forms for validations. And I would like to Mark all fields as touched when the user blur on the last required field. currently I am only able to do this by passing the form and individually doing each field. From research I see there is a way to do MarkAllAsTocuhed but it's throwing an error. Is there a better/correct way to do this with Angular 7. I also tried looping through the controls but since it's an object that also does not work.

.HTML

 <form #myForm="ngForm">
    <mat-form-field class="input-field">
              <input #field1="ngModel" name="name1" 
             [(ngModel)]="fieldOne" type="text" matInput placeholder="Field 1" required>     
    </mat-form-field>

    <mat-form-field class="input-field">
              <input #field2="ngModel" name="name2" 
             [(ngModel)]="fieldTwo" type="text" matInput placeholder="Field 2" required>     
    </mat-form-field> 

    <mat-form-field class="input-field">
              <input #field2="ngModel" name="name3" 
             [(ngModel)]="fieldThree" type="text" matInput placeholder="Field 3" required>     
    </mat-form-field> 

    <mat-form-field class="input-field">
              <input #field3="ngModel" name="name4" 
             [(ngModel)]="fieldFour" type="text" matInput placeholder="Field 4" 
             (blur)="touchAllFields(myForm.form)" required>     
  </mat-form-field>
</form>

.TS

touchAllFields(form){
//Working Version
form.controls.name1.markAsTouched();
form.controls.name2.markAsTouched();
form.controls.name3.markAsTouched();
form.controls.name4.markAsTouched();
form.controls.name5.markAsTouched();
form.controls.name6.markAsTouched();
form.controls.name7.markAsTouched();
form.controls.name8.markAsTouched();

//Failed Attempt
form.controls.markAllAsTouched(); //typeError: form.controls.markAllAsTouched is not a function

//Failed Attempt 
for(var i = 0; i < form.controls.length; i++){
  form.controls[i].markAllAsTouched(); //Failed since its an object and not an array
 }
}

Hi Flash, you can check below urls for that. There have a solution it might be help. https://stackoverflow.com/questions/40529817/reactive-forms-mark-fields-as-touched — Prabhat, Nov 20 '19 at 15:10
Thanks that was actually my point of reference. But the solutions seemed to long an unnecessary. I would think I should be able to use markAllAsTouched somehow but thought I may be implementing it wrong. — Flash, Nov 20 '19 at 15:19

Dane Brouwer · Answer 1 · 2020-06-29T08:51:32.887

12

`ngForm` itself has no `markAllAsTouched` method since it's not a `FormGroup` or `FormArray`. However, `NgForm` has an instance of a `formGroup` accessible via `.form` or `.control` - source.

This has been available since Angular2 until the current latest version (Angular10)

So the correct answer to your questions should be as follows:

form.form.markAllAsTouched();

or

form.control.markAllAsTouched();

edited Jun 29 '20 at 08:51

answered Jun 29 '20 at 07:51

Dane Brouwer

2,827
1
22
30

score 3 · Accepted Answer · answered Nov 20 '19 at 15:02

3

You can try this:

Found out that Object.keys can handle this.

 Object.keys(this.form.controls).forEach(key => {
      this.form.get(key).markAsTouched();
    });

For Angular 8+, you can use:

  Object.keys(this.form.controls).forEach(key => {
      this.form.controls[key].markAsTouched();
    });

answered Nov 20 '19 at 15:02

Doflamingo19

1,591
4
12
32

Thanks the second one worked eventhough I'm using Angular 7. Any idea why do `form.controls.markAllAsTouched` does not work? – Flash Nov 20 '19 at 15:22
@Flash can you give me correct answer? I don't know, maybe the method doesn't exist! – Doflamingo19 Nov 20 '19 at 15:23
yeah I got you in a couple of hours just wanna give others a chance to answer. Thanks – Flash Nov 20 '19 at 15:24

Template Driven Form Mark All as touched - Angular 7

2 Answers2

ngForm itself has no markAllAsTouched method since it's not a FormGroup or FormArray. However, NgForm has an instance of a formGroup accessible via .form or .control - source.

`ngForm` itself has no `markAllAsTouched` method since it's not a `FormGroup` or `FormArray`. However, `NgForm` has an instance of a `formGroup` accessible via `.form` or `.control` - source.