Ionic2 form validation using Formbuilder and validators

The form verification method in Ionic2 is based on angular2 form validation, and after the Angular2 form has been updated, from the previous

Import {formbuilder, Control, Controlgroup, validators, form_directives} from ' @angular/common ';

Updated to introduce from forms

Import {formbuilder, validators, formgroup} from ' @angular/forms ';

And there are some changes to the name used by the form before

after the change	before the change
Formgroup	Ngformmodel
FormControl	Ngformcontrol
Formcontrolname	Ngcontrol
Formgroupname	Ngcontrolgroup
Formarrayname	Ngcontrolgroup
FormControl ()	Control
Formgroup ()	Controlgroup
Formarray ()	ControlArray

Specific changes can be found in the details

The following is the latest code to use Formbuilder for form validation

--login.ts-–

Import {tabspage} from './.
/tabs/tabs '; Import {Storageservice} from './. /..
/providers/storage-service ';//This introduces a service created by itself, primarily for storing user information import {Component} from ' @angular/core ';

Import {Navcontroller} from ' Ionic-angular ';


Import {formbuilder, validators, formgroup} from ' @angular/forms '; @Component ({selector: ' Page-login ', Templateurl: ' login.html ', providers: [Storageservice]}) Export class Loginpag
  e {loginform:formgroup;
  Username:any;
  Password:any; Constructor (public Navctrl:navcontroller, private formbuilder:formbuilder, public Storage:storageservice) {This.lo  Ginform = Formbuilder.group ({username: [", Validators.compose ([Validators.minlength], Validators.maxlength (11),
      Validators.required, Validators.pattern ("^ (13[0-9]|15[012356789]|17[03678]|18[0-9]|14[57]) [0-9]{8}$")]), Password: [', Validators.compose ([Validators.required, Validators.minlength (6)])]}) This.username = This.loginfo
    rm.controls[' username ']; This.Password = this.loginform.controls[' password ']; } login (value) {if (Value.username = = "mobile number" && Value.password = = 123456) {this.storage.setUser (VA
      Lue);
    This.navCtrl.push (Tabspage);
    } else {Console.log ("Login Failed");
 }

  }

}

--login.html--

<ion-header> <ion-navbar hidebackbutton> <ion-title> User Login </ion-title> </ion-navb ar> </ion-header> <ion-content padding> <form [formgroup]= "LoginForm" (ngsubmit) = "Login (loginform. Value) "Novalidate> <ion-item [class.error]="!username.valid && username.touched "> &L t;ion-label> User name:</ion-label> <ion-input type= "tel" placeholder= "Please enter user name" value= "[formcontrol]=" us Ername "clearinput=true></ion-input> </ion-item> <div *ngif=" username.haserror (' required ') && username.touched "class=" error-message ">* Please enter user name </div> <div *ngif=" (Username.haserror (' m Inlength ') | | Username.haserror (' maxlength ') | | Username.haserror (' pattern ')) && username.touched "class=" error-message ">* Please enter the correct phone number </div> <i on-item> <ion-label> password:</ion-label> <ion-input type= "PassworD "placeholder=" Please enter the password "value=" "[formcontrol]=" password "clearinput=true></ion-input> </ion-item> <div *ngif= "password.haserror (' required ') && password.touched" class= "error-message" >* Please enter your password </div&
        Gt <div *ngif= "(Password.haserror (' minlength ')) && password.touched" class= "error-message" >* password length at least six bits </div> <button Ion-button block color= "secondary" type= "Submit" [disabled]= "!loginform.valid" > Login </b Utton> </form> </ion-content>