検証クラスの適用ng-validは、実際の状態変更後に1ステップ遅延します。

ページ上に2つの入力コントロールが反応します（sample参照）。ここは、メインテンプレートの一部です：検証クラスの適用ng-validは、実際の状態変更後に1ステップ遅延します。

<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：私は「隠されたコントロール」を編集した場合、それは他の制御次のコードを使用して新しいマスクされた値（「PINコード」）を埋めますコントロールの値の変更直後ではなく、次の変更サイクル（5番目の文字を入力するとき）にのみ "コード"が表示されます。したがって、 "PINコード"の緑の有効なインジケータは、次回の変更後にのみ表示されます（通常、3文字または5文字で、4文字ではありません）。値の変更直後に検証クラスを適用する方法はありますか？

出典

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