Angular2-触发表单验证

Question

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.

I have tried this but doesnt work:

 saveGroupDetails() {
    for(let i=0;i<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();

The form is:

<form #groupDetailsFormVar="ngForm" name="groupDetailsForm">
                    <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></paper-input>
                    <paper-input  auto-validate ="true" name="name" [readonlyCustomGroups]="groupRights===false" class="paddingInput" 
                                  error-message="Field required!" required="true" label="Name" [(ngModel)]="obj.name" ngDefaultControl ></paper-input>
                    <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)"
                            ></vaadin-combo-box>
                    <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" ></vaadin-combo-box>
                    <paper-input label="Type" auto-validate ="true" name="type" required="true" error-message="Field required!" class="paddingInput" [(ngModel)]="obj.groupTypeCode" readonly="true" ngDefaultControl></paper-input>

               </form>

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.

Am i doing something wrong? Is there something else i should do?

Answer 1

It seems that because they are polymer elements, there are still some issues when implementing them with the help of Angular2-Polymer.

I fixed my problem by calling the "validate()" polymer method on each element that was a child of the form.

The error css classes and message now appear.