Angular2 - 触发表单验证答案

【问题标题】：Angular2 - Trigger form validationAngular2 - 触发表单验证
【发布时间】：2016-11-29 11:13:33
【问题描述】：

我有一个包含 5 个聚合物元素的表格。当我单击表单外的保存按钮时，如果任何字段中没有任何有效数据，我想触发验证并为每个不符合预期结果的字段显示错误消息。

我试过了，但是不行：

 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();

形式为：

<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>

如果我使用表单的 reset() 方法，它会触发验证，但也会从字段中删除所有数据，我不希望这样。

我做错了吗？还有什么我应该做的吗？

【问题讨论】：

标签： validation angular polymer

【解决方案1】：

好像因为是聚合物元素，所以在Angular2-Polymer的帮助下实现还是有一些问题。

我通过在表单的每个子元素上调用“validate()”聚合物方法解决了我的问题。

现在出现错误 css 类和消息。

【讨论】：