मैं कोणीय 2

Question

में फ़ॉर्म को कैसे डिबॉन्स कर सकता हूं, मैं बहुत सारी पोस्ट के माध्यम से गया, लेकिन जो भी मैं ढूंढ रहा था उसे नहीं मिला।

असल में,

मैं प्रपत्र परिवर्तन पर उपयोगकर्ता सत्यापन दिखा रहा हूँ। ,

<div class="form-group" 
     [class.error]="!loginForm.find('email').valid && loginForm.find('email').touched"> 
     <div class="input-wrapper"> 
      <input type ="email" 
       class="form-control" 
       id="email-input" 
       placeholder="Email" 
       formControlName="email"> 
     </div> 
     <div *ngIf="loginForm.controls['email'].dirty && !loginForm.controls['email'].valid" 
      class="alert-msg">Email is invalid</div> 
</div> 

और अन्य पदों पर देख रहे हैं, मेरे टीएस जो फार्म debounces यह है:: मेरे टेम्पलेट इस तरह दिखता है

this.loginForm.valueChanges.debounceTime(500).subscribe(form => { 
    console.log(form, this.loginForm); 
}); 

अब, कंसोल लॉग वास्तव में debouncing कर रहे हैं। लेकिन, सत्यापन संदेश बहस नहीं करता है। यह सीधे संदेश को दिखाता है।

क्या इस मुद्दे को दूर करने का कोई तरीका है?

धन्यवाद, आने के लिए,

Answer 1

मेरा मानना ​​है कि debounceTime केवल प्रतिक्रिया form => { ... } में कोड आप को प्रभावित करेगा। तो क्या तुम कर सकते हो वहाँ सत्यापन सेट है:

private loginFormIsValid:boolean; 
private emailIsNotValid:boolean; 

ngOnInit() { 
    this.loginForm.valueChanges.debounceTime(500).subscribe(form => { 
     this.loginFormIsValid = !loginForm.find('email').valid 
      && loginForm.find('email').touched; 
     this.emailIsNotValid = loginForm.controls['email'].dirty 
      && !loginForm.controls['email'].valid; 
     console.log(form, this.loginForm); 
    }); 
} 

... और फिर आप इसका इस्तेमाल होता है इस प्रकार में आप टेम्पलेट:

<div class="form-group" [class.error]="!loginFormIsValid"> 
    <div class="input-wrapper"> 
     <input type ="email" 
      class="form-control" 
      id="email-input" 
      placeholder="Email" 
      formControlName="email"> 
    </div> 
    <div *ngIf="emailIsNotValid" 
     class="alert-msg">Email is invalid</div> 
</div> 

आप एक post on debouncing पर एक नज़र ले जा सकते हैं, यह एक अच्छा उदाहरण है।