How to show error message in form in ionic 2

Question

Below the world of code works fine in the browser.

Here is my .html

<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> <p *ngIf="myForm.controls.firstname.errors && myForm.controls.firstname.dirty "> <small class="up"> <strong> <i> Min 3 chars</i></strong> </small> </p> 

here is my .ts file

 this.myForm = new FormGroup({ 'firstname' : new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]), 'lastname' : new FormControl('', [Validators.required,Validators.minLength(1),Validators.maxLength(10)]), 'useridphone' : new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]), 'password' : new FormControl('',Validators.compose([Validators.required,Validators.minLength(4),Validators.maxLength(25), Validators.pattern(this.passwordRegex)])), 'confirmpassword': new FormControl('',Validators.required), 'email' : new FormControl( '', Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ) }) 

When I try to build my project (`ionic build android '), I get the error below

The 'firstname' property does not exist on type '{[key string]: AbstractControl; } ".

here is my ionic info

 Cordova CLI: 6.3.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.14 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 ios-deploy version: Not installed ios-sim version: Not installed OS: Linux 4.4 Node Version: v6.0.0 Xcode version: Not installed 

Answer 1

You need to access formControls as follows:

 myForm.controls['firstname'] 

Change your p tag:

 <p *ngIf="myForm.controls['firstname'].errors && myForm.controls['firstname'].dirty ">