Angular2 - 触发形式验证

我有一个5聚合物元素的形式。当我单击窗体外部的保存按钮时，如果任何字段已在其中有任何有效数据，我想触发验证并显示错误消息，以确保每个字段不符合预期结果。Angular2 - 触发形式验证

我都试过，但不工作：

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（）方法，但它引发的验证，但也消除从字段中的所有数据，我不想要的。

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

来源

2016-11-29 IvanSt

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

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

现在出现错误的CSS类和消息。

来源

2016-11-29 17:46:17 IvanSt

Angular2 - 触发形式验证

回答

相关问题