How to display validation error messages in Angular 2

Question

I want to create a form where the user will enter his First_Name and Last_Name. I'd like to validate those fields in client-side.

Is there any generic forms validator in Angular 2 and also I want show the error message in client-side. How to show error messages ?

Bellow is my code

html file

<form [formGroup]="myForm"  (ngSubmit)="submit()" >
<ion-row>
  <ion-item>
    <ion-label primary floating>FIRST NAME</ion-label>
    <ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
  </ion-item>

 <ion-item>
   <ion-label primary floating>LAST NAME</ion-label>
   <ion-input type="text" id="lastname"  class="form-control" formControlName="lastname" ></ion-input>
 </ion-item>
</ion-row>
</form>

ts file:

this.myForm = formBuilder.group({
   'firstname'  :  ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(10)])],
   'lastname'   :  ['', Validators.compose([Validators.required, Validators.minLength(1), Validators.maxLength(10)])],})

Backend Endpoint name and fields name:

submit(){
    let registerNewUserObj ={
       first_name:this.myForm.value.firstname,
       last_name:this.myForm.value.lastname

Amruth · Accepted Answer · 2016-12-13 12:22:33Z

1

Use this code to display error messages.

<ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
<p class="errorMessage" *ngIf="myForm.controls.firstname.errors && myForm.controls.firstname.dirty ">Please provide first name.</p>

edited Dec 13, 2016 at 12:22

answered Dec 13, 2016 at 11:59

Amruth

5,9122 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SelvaKumar Duraisamy Over a year ago

Error showing like Cannot read the property 'controls' in browser!

Amruth Over a year ago

have you created like this in your component? myForm = new FormGroup({ firstname: new FormControl(), lastname: new FormControl()})

Amruth Over a year ago

@SelvaKumarDuraisamy I edited answer check it now. i was given addEntryForm instead myForm. now can you check

SelvaKumar Duraisamy Over a year ago

Now its displaying Form, but When i clicked the first_name and release there is no showing any error message!!

SelvaKumar Duraisamy Over a year ago

error shows "Cannot find control with name : firstname "

|

Collectives™ on Stack Overflow

How to display validation error messages in Angular 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related