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 - 觸發形式驗證

回答

相關問題