Validation

Ionic Framework ionic-v3
1

Hi All,

Good afternoon,

I am new in IONIC and I am trying to develop registration form in IONIC Version 3.2.1.

And I also want to make validation on control please any one guide me how can I do that.

2

You can check below code for validation

Home.ts File


export class Login {

 @ViewChild('input') myInput ;

  mymyusers: any
  struserID:any
  strMessage:any


  strUserName:any 
  strPassword:any
  
 constructor(private platform: Platform ,public navCtrl: NavController,public  http: Http,
  private toastCtrl: ToastController,public loadingCtrl: LoadingController,
  public alertCtrl: AlertController) {






// this.postRequest();
 }
//  exit(){
//       let alert = this.alertCtrl.create({
//         title: 'Confirm',
//         message: 'Do you want to exit?',
//         buttons: [{
//           text: "exit?",
//           handler: () => { this.exitApp() }
//         }, {
//           text: "Cancel",
//           role: 'cancel'
//         }]
//       })
//       alert.present();
//   }
//   exitApp(){
//     this.platform.exitApp();
//   }
//    ionViewDidLoad() {
//     console.log('ionViewDidLoad Login');
//   }



  callLogAPI(event) {
    

console.log("uname",this.strUserName);
  console.log("password",this.strPassword);


if(this.strUserName == null ) {
  

 let alert = this.alertCtrl.create({
      title: 'User Name',
      subTitle: 'Please Enter Your User Name',
      buttons: [
        {
          text: 'OK',
          handler: data => {
            // if (this.createSuccess) {
            //   this.nav.popToRoot();
            // }
            this.myInput.setFocus();
          }
        }
      ]
    });
    alert.present();


  }else if(this.strPassword == null ) {
   

 let alert = this.alertCtrl.create({
      title: 'Password',
      subTitle: 'Please Enter Your Password',
      buttons: [
        {
          text: 'OK',
          handler: data => {
     
            this.myInput.setFocus(true);
          }
        }
      ]
    });
    alert.present();
  }
  else{
    this.showPopup("Success", "Account created.");
}

Home.html File

<ion-header>

    <ion-navbar>
        <ion-title>login</ion-title>
    </ion-navbar>

</ion-header>

<ion-content padding>


    <ion-item>
        <ion-label color="primary" floating>Enter User Name</ion-label>
        <ion-input id="myUsername" [(ngModel)]="strUserName" #input type="email" autofocus></ion-input>
    </ion-item>

    <ion-item>
        <ion-label color="primary" floating>Enter Password</ion-label>
        <ion-input id="myPassword" [(ngModel)]="strPassword" #input type="password" autofocus></ion-input>
    </ion-item>

    <p>
        <button ion-button block color="menu-o" (click)="callLogAPI($event)">
            <div>
                <ion-icon name="login"></ion-icon>
                <label>Login</label>
            </div>
        </button>
    </p>

    <p>
        <button ion-button block color="menu-o" (click)="callRegistrationAPI($event)">
        <div>
            <ion-icon name="Registration"></ion-icon>
            <label>Registration</label>
        </div>
        </button>
    </p>
    <p>
        <button ion-button block color="menu-o" (click)="callForgotAPI($event)">
       
        <label>ForgotPassword</label>
    
</button>
    </p>


    <button ion-button block color="menu-o" (click)="checkNetWork($event)">
        
       
        <label>Check NetWork</label>
    
</button>



</ion-content>
3

Thank you Anil,

Can you please also suggest me how i can make email validation or password compare validation.

4

I would instead suggest the approach in the reactive section of the angular cookbook.