Question

我的表格有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（）方法，它会触发验证，但也会删除字段中的所有数据，我不希望这样。

我做错了吗？我还有别的什么吗？

Answer 1

似乎因为它们是聚合物元素，在Angular2-Polymer的帮助下实施它们时仍然存在一些问题。

我通过调用＆＃34; validate（）＆＃34;来解决我的问题。聚合物方法对每个元素都是形式的子元素。

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

Angular2 - 触发器表单验证

1 个答案: