I've been attempting to utilize ngOnChanges in Angular 4, but I haven't been able to get it to work.
login.component.ts
import { AuthService } from './../../services/auth.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit, OnChanges,SimpleChanges } from '@angular/core';
import { FormControl, Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit,OnChanges {
returnUrl: string;
signInForm: FormGroup;
errorMsg: any;
constructor(
private userService: AuthService, private router: Router, private route: ActivatedRoute, private fb: FormBuilder) {
this.signInForm = fb.group ({
'email' : new FormControl(null, Validators.compose([Validators.email, Validators.required])),
'password': new FormControl(null, Validators.compose([Validators.required, Validators.minLength(6)]))
});
}
login() {
this.userService.login({email: this.signInForm.value.email, password: this.signInForm.value.password})
.subscribe(
data => {
this.router.navigate(['']);
},
error => {
this.errorMsg = error._body;
console.log(this.errorMsg);
});
}
ngOnChanges(changes: SimpleChanges) {
if(changes.email){
console.log("email input change");
}
}
ngOnInit() {
}
}
login.component.html
<form [formGroup]="signInForm" (ngSubmit)="login()">
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
Log-in to your account
</div>
</h2>
<div class="ui large form">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" formControlName="email" placeholder="E-mail address">
</div>
<span
Upon inspection of the ngOnChanges function:
ngOnChanges(changes: SimpleChanges) {
if(changes.email){
console.log("email input change");
}
}
I'm specifically trying to monitor changes in the email input, such as user input, but no output is being displayed in the console. It seems like the change detection is not functioning as expected.