How can I discard a form in angular2

Question

I went through many posts, but did not find what I was looking for.

Basically,

I am showing a user check for form changes. My template looks like this:

<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> 

And, looking at other posts, my TS, which issues the form, is this:

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

Now console magazines are actually debuting. But the check message is not debugged. It immediately displays a message.

Is there any way to overcome this problem?

Thanks for stopping,

Answer 1

I believe that debounceTime will only affect the code that you have in the response form => { ... } . So you can do this:

 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); }); } 

... And then you will use it in your template as follows:

 <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> 

You can see the debouncing post , this is a good example.