實際狀態更改後，將驗證類ng-valid延遲一個步驟

我在頁面上有反應形式的兩個輸入控件（請參閱sample）。這裏是主模板部分：實際狀態更改後，將驗證類ng-valid延遲一個步驟

<form [formGroup]="loginForm" novalidate> 
    <ion-list> 
    <ion-item> 
     <ion-label>PIN code</ion-label> 
     <ion-input type="text" formControlName="pinVisible" ></ion-input> 
     </ion-item> 
    <ion-item> 
     <ion-label>hidden control</ion-label> 
     <ion-input type="number" formControlName="pin" #pin></ion-input> 
    </ion-item> 
    </ion-list> 
</form>

兩個應該是有效的，當內容僅供4個字符長。當我編輯「隱藏控制」它填充其它控制（「密碼」）與下面的代碼新的屏蔽值：

this.loginForm = this.fb.group({ 
    pinVisible: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]], 
    pin: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]] 
}); 
this.pinVisibleControl = this.loginForm.get('pinVisible'); 
let pinControl = this.loginForm.get('pin'); 
pinControl.valueChanges.subscribe((value: string) => { 
    console.log(value); 
    this.pinVisibleControl.setValue(new Array(value.length).fill('*').join('')); 
    this.pinVisibleControl.markAsTouched({ onlySelf: true }); 
    console.log(`PIN visible status: ${this.pinVisibleControl.status}`); 
});

問題是驗證狀態類（NG-有效尤其）被施加到「PIN代碼「不是在控制值更改後，而是僅在下一個更改週期（當我輸入第五個字母時）。因此，只有在下次更改後（通常包含3或5個字母，而不是4個），「密碼」上的綠色有效指示符纔會出現。任何建議如何在價值改變後立即申請驗證課程？

來源

2017-08-25 Андрей Дорошенко

您可以嘗試撥打this.loginForm.updateValueAndValidity();而不是.markAsTouched()。標記爲髒/觸摸只有在您檢查其有效性時纔會生效。

來源

2017-08-25 17:39:38

我在.markAsTouched（）後添加了'this.pinVisibleControl.updateValueAndValidity（{onlySelf：true}）;'但看起來沒有幫助。我嘗試了不同的參數值。 –

實際狀態更改後，將驗證類ng-valid延遲一個步驟

回答

相關問題