I have successfully implemented form validation using the following code:
import { FormGroup, Validators, FormControl } from "@angular/forms";
Currently, I have disabled the Submit button until the form is filled out correctly. The only indication given to the user regarding the validity of the form is by displaying red text in the input fields when they are not valid.
https://i.sstatic.net/2U7cV.png
I am looking for a way to display error messages to the user indicating what exactly is wrong with their input.
Is there an in-built feature in Angular2 that can show the error message or reason why an input field is invalid? Or do I need to create custom error messages for each field? If custom error messages are required, how can I check each input field, e.g., when the user moves focus away from a specific field, so I can display a message explaining why it was invalid?
I already have a method to display messages; I just need a mechanism to obtain the error messages, i.e., extract text from the form to explain why it's invalid.
Example
Please provide a valid mobile number
Code
REGEX
ngOnInit() {
this.personalForm = new FormGroup({
email : new FormControl(this.auth.user.email,Validators.required ),
first_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
middle_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
last_name: new FormControl(null,[
Validators.required,
Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
]),
dob : new FormControl (null, [
Validators.required,
Validators.pattern("[1][9][0-9][0-9]-[0-9][0-9]-[0-9][0-9]|[2][0][0-9][0-9]-[0-9][0-9]-[0-9][0-9]")
]),
mobile_phone: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
]),
home_phone: new FormControl(null, [
Validators.required,
Validators.pattern("[0-9][0-9][0-9]-[0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]|[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]")
]),
business_phone: new FormControl(null, [
Validators.requi...
Valid Boolean / Handle The Form Data
save(model: Personal, isValid: boolean) {
if (!isValid) {
console.log('Personal Form is not valid');
console.log(model, isValid);
} else {
console.log('Personal Form is valid');
console.log(model, isValid);
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.post('http://localhost:4200/api/updateProfile',
model,
{headers: headers})
.map((res: Response) => res.json())
.subscribe((res) => {
//do something with the response here
console.log(res);
});
}
}
Form
<form [formGroup]="personalForm" novalidate (ngSubmit)="save(personalForm.value, personalForm.valid)">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card card-inverse card-success">
<div class="card-header">
<strong>Personal Information</strong>
</div>
<div class="card-block">
<div class="row">
<div class="form-group col-sm-12 col-md-12">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control" id="email" formControlName="email" placeholder="{{personal.email}}"readonly>
</div>
<div class="alert alert-danger" *ngIf="!personalForm.controls.email.valid && submitted ">
*Email is required.
</div>
</div>
</div>