Struggling for hours to display an error message when a form submits and returns an error status code. The solution seems elusive...
In the login form component below, I've indicated where I would like to indicate whether the form is valid or invalid.
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from "@angular/forms";
import { AuthenticationService } from "../../../services/authentication.service";
import { User } from "../../../domain/user";
@Component({
selector: 'login-form',
templateUrl: './login-form.component.html'
})
export class LoginFormComponent implements OnInit {
loginForm: FormGroup;
post: any;
username: string;
password: string;
user: User;
errorMessage: string = '';
constructor(private fb: FormBuilder, private router: Router, private authenticationService: AuthenticationService) {
this.loginForm = fb.group({
'username': [null, Validators.required],
'password': [null, Validators.required],
'login': false
});
}
ngOnInit() {
this.authenticationService.logout(); // reset login status
}
login(values) {
this.username = values.username;
this.password = values.password;
this.authenticationService.login(this.username, this.password)
.subscribe(result => {
if (result === true) {
this.router.navigate(['/']);
localStorage.setItem('currentUser', JSON.stringify(this.user));
// here form should be valid
} else {
this.errorMessage = 'Username or password is incorrect';
// here form should be invalid
}
});
}
}
Login Form Html, the second <div> is the error id like shown after the form submits.
<form id="loginForm" [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
<div class='form-text error' *ngIf="submitted">
<div *ngIf="loginForm.invalid" class="help-block error small">Username or password is incorrect.</div>
</div>
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input type="text" placeholder="Please enter your usename" title="Please enter you username" required value=""
id="username" class="form-control" name="username" formControlName="username">
<div class='form-text error' *ngIf="loginForm.controls.username.touched">
<div *ngIf="loginForm.controls.username.hasError('required')" class="help-block error small">Username is required.</div>
</div>
<span *ngIf="loginForm.controls.username.valid || !loginForm.controls.username.touched" class="help-block small">Your unique username</span>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input type="password" title="Please enter your password" placeholder="******" required value=""
id="password" class="form-control" name="password" formControlName="password">
<div class='form-text error' *ngIf="loginForm.controls.password.touched">
<div *ngIf="loginForm.controls.password.hasError('required')" class="help-block error small">Password is required.</div>
</div>
<span *ngIf="loginForm.controls.password.valid || !loginForm.controls.password.touched" class="help-block small">Your strong password</span>
</div>
<div>
<button type="submit" class="btn btn-accent" [disabled]="!loginForm.valid">Login</button>
<a class="btn btn-default" routerLink="/register">Register</a>
</div>
</form>