title: Template Driven Form Mark All as touched - Angular 7
body: <p>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.</p>
  
  <p>.HTML</p>
  
  <pre><code> &lt;form #myForm="ngForm"&gt;
      &lt;mat-form-field class="input-field"&gt;
                &lt;input #field1="ngModel" name="name1" 
               [(ngModel)]="fieldOne" type="text" matInput placeholder="Field 1" required&gt;     
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field class="input-field"&gt;
                &lt;input #field2="ngModel" name="name2" 
               [(ngModel)]="fieldTwo" type="text" matInput placeholder="Field 2" required&gt;     
      &lt;/mat-form-field&gt; 
  
      &lt;mat-form-field class="input-field"&gt;
                &lt;input #field2="ngModel" name="name3" 
               [(ngModel)]="fieldThree" type="text" matInput placeholder="Field 3" required&gt;     
      &lt;/mat-form-field&gt; 
  
      &lt;mat-form-field class="input-field"&gt;
                &lt;input #field3="ngModel" name="name4" 
               [(ngModel)]="fieldFour" type="text" matInput placeholder="Field 4" 
               (blur)="touchAllFields(myForm.form)" required&gt;     
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>.TS</p>
  
  <pre><code>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 &lt; form.controls.length; i++){
    form.controls[i].markAllAsTouched(); //Failed since its an object and not an array
   }
  }
  </code></pre>