title: Angular2 - Trigger form validation
body: <p>I have a form with 5 polymer elements. When i click the save button outside the form, in case any of the fields doenst have any valid data in them, i want to trigger the validations and display the error message for each field that doesnt meet the expected result.</p>
  
  <p>I have tried this but doesnt work:</p>
  
  <pre><code> saveGroupDetails() {
      for(let i=0;i&lt;Object.keys(this.groupDetailsForm.controls).length;i++){
        let key = Object.keys(this.groupDetailsForm.controls)[i];
         this.groupDetailsForm.controls[key].markAsTouched();
         this.groupDetailsForm.controls[key].markAsDirty();
         this.groupDetailsForm.controls[key].updateValueAndValidity();
      }
      this.cdr.detectChanges();
  </code></pre>
  
  <p>The form is: </p>
  
  <pre><code>&lt;form #groupDetailsFormVar="ngForm" name="groupDetailsForm"&gt;
                      &lt;paper-input  auto-validate ="true" name="code" [readonlyCustomGroups]="groupRights===false" class="paddingInput" 
                                    error-message="Field required!" required="true" label="Code" [disabled]="fromEdit" [(ngModel)]="obj.code" ngDefaultControl&gt;&lt;/paper-input&gt;
                      &lt;paper-input  auto-validate ="true" name="name" [readonlyCustomGroups]="groupRights===false" class="paddingInput" 
                                    error-message="Field required!" required="true" label="Name" [(ngModel)]="obj.name" ngDefaultControl &gt;&lt;/paper-input&gt;
                      &lt;vaadin-combo-box   auto-validate ="true" name="region" [readonlyCustomGroups]="groupRights===false"
                                          error-message="Field required!" required [items]="REGION"
                                          class="paddingInput"
                                          item-label-path="name"
                                          item-value-path="code"
                                          [value]="obj.regionCode"
                                          [(ngModel)]="obj.region"
                                          label="Region" 
                                          ngDefaultControl 
                                          (selected-item-changed)="getDdlDataForCountry($event.detail.value.code)"
                              &gt;&lt;/vaadin-combo-box&gt;
                      &lt;vaadin-combo-box   auto-validate ="true" name="country" [readonlyCustomGroups]="groupRights===false" 
                                          error-message="Field required!" required class="elements-box" [items]="COUNTRY"
                                          class="paddingInput"
                                          item-label-path="name"
                                          item-value-path="code"
                                          [disabled]="!COUNTRY" 
                                          [(ngModel)]="obj.country"
                                          [value]="obj.countryCode" 
                                          ngDefaultControl 
                                          (selected-item-changed)="obj.countryCode=$event.detail.value.code"
                                          label="Country" &gt;&lt;/vaadin-combo-box&gt;
                      &lt;paper-input label="Type" auto-validate ="true" name="type" required="true" error-message="Field required!" class="paddingInput" [(ngModel)]="obj.groupTypeCode" readonly="true" ngDefaultControl&gt;&lt;/paper-input&gt;
  
                 &lt;/form&gt;
  </code></pre>
  
  <p>If i use the reset() method of the form, it does trigger the validations but also removes all data from the fields and i dont want that.</p>
  
  <p>Am i doing something wrong? Is there something else i should do?</p>