3

I am using FormGroup, FormBuilder and Validators class to validate a form in Angular2 app.

This is how I am defining the required validation rules for email and password validation:-

export class LoginComponent implements OnInit { loginFormGroup:FormGroup; adminLoginmodel = new Admin('', '', '', 'Emailsss','Passwordsss'); constructor( private route: ActivatedRoute, private router: Router, private _adminLogin: AdminLoginService, fb: FormBuilder ){ this.loginFormGroup = fb.group({ 'email' : [null, Validators.compose([Validators.required, Validators.email])], 'password': [null, Validators.required] }); } }

The code Validators.compose([Validators.required, Validators.email]) checks both whether an email field is empty and whether the provided string is valid email.

However, I don't know how to show different validation message in different cases. Say

  1. If email field is empty, I need to display "Please provide an email address"
  2. If provided email is not valid, then I need to display "Provided email is not a valid email".

Here is how I was displaying validation message in my html:-

<div class="input-group input-group-lg" [ngClass]="{'has-error':!loginFormGroup.controls['email'].valid && loginFormGroup.controls['email'].touched}"> <span class="input-group-addon"><i class="glyphicon glyphicon-user red"></i></span> <input type="text" class="form-control" placeholder="Email" id="email" name="email" [formControl]="loginFormGroup.controls['email']" [(ngModel)]="adminLoginmodel.email"/> </div> <div class="alert alert-danger" *ngIf="!loginFormGroup.controls['email'].valid">You must add an email.</div>

How can I show different messages in different cases?

Improve this question

2 Answers 2

Reset to default
0 
import { Component } from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; @Component({ selector: 'my-app', template: ` <input [formControl]="ctrl" /> <div *ngIf="ctrl.errors?.email"> Provided email is not a valid email </div> <div *ngIf="ctrl.errors?.required"> Please provide an email address </div> `, styleUrls: [ './app.component.css' ] }) export class AppComponent { ctrl = new FormControl(null, Validators.compose([Validators.email, Validators.required])); }

Live demo

Discussion in the comments proved that the answer to this specific problem is:

<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('email')">Provide a valid email.</div> <div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('required')">Please provide an email address</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

<div *ngIf="ctrl.errors?.email"> Provided email is not a valid email </div><div *ngIf="ctrl.errors?.required"> Please provide an email address </div> doesn't show any messages.
The live demo is working correctly. In your case you need to change the *ngIf expression to loginFormGroup.get('email').errors?.email and loginFormGroup.get('email').errors?.required
<div class="alert alert-danger" *ngIf="loginFormGroup.get('email').errors?.required">You must add an email.</div> doesn't display any error message
<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('email')">Provide a valid email.</div> does the trick.
0

You can use this to display the error message

<div *ngIf="loginFormGroup.get('email').touched && loginFormGroup.get('email').hasError('required')">Please provide an email address</div> <div *ngIf="loginFormGroup.get('email').touched && loginFormGroup.get('email').hasError('email')">Provided email is not a valid email</div>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.