Custom validation error message not showing while authenticating the user

angular
1

I just created custom login form using Angular2. Just have a look in to my code

// login.componemt.ts
export class LoginComponent extends MeteorComponent implements OnInit {
loginForm: FormGroup;
error: string;
formLabelTitle: string;

constructor(
private router: Router,
private formBuilder: FormBuilder
) {
super();
}

ngOnInit() {
this.loginForm = this.formBuilder.group({
email: [’’, Validators.required],
password: [’’, Validators.required]
});
this.error = ‘’;
this.formLabelTitle = ‘Log In’;
}

login() {
this.error = ‘’;
if (this.loginForm.valid) {
Meteor.loginWithPassword(this.loginForm.value.email, this.loginForm.value.password, (err) => {
if (err) {
this.error = err;
} else {
this.router.navigate([’/’]);
}
});
} else {
if ( this.loginForm.value.email==’’ ){
this.error += “Email is required”;
}
if ( this.loginForm.value.password==’’ ){
this.error += “
”;
this.error += “Password is required”;
}
}
}
}

// login.component.html (code to show error message)

<div [hidden]="error == ''">
        <md-toolbar class="md-warn" layout="row" layout-fill layout-padding layout-margin>
          <p class="md-body-1 motiv-error-prompt">{{ error }}</p>
        </md-toolbar>
      </div>

Error message is showing when authticating the user using the meteor function Meteor.loginWithPassword

Have anyone idea what i am doing wrong