IONIC form (form) validation

1, create Ionic project do not know can click here to create the project

2, we change the password as a column

<ion-view title= "Change Password" > <ion-nav-bar> <ion-header-bar class= "Nav-title-slide-ios7 bar-light" align-title= "center" > <ion-nav-buttons side= "left" > <a class= "button Button-icon icon ion- Ios-undo-outline "style=" font-size:30px; "ng-click=" backbtn (); "
    ></a> </ion-nav-buttons> </ion-header-bar> </ion-nav-bar> <ion-content> <form name= "DataForm" novalidate= "Novalidate" ng-submit= "Save (dataForm);" > <div class= "List" > <label class= "Item item-input Item-floating-label" > <span C lass= "Input-label" > Original password </span> <input type= "password" ng-model= "Data.password" Required placeholder= " Please enter the original password "> </label> <label class=" Item item-input Item-floating-label "> <span cl ass= "Input-label" > New password </span> <input type= "password" ng-model= "Data.newpassword" required placeholder
 = "Password is English and digital" >       </label> <label class= "Item item-input Item-floating-label" > <span class= "Input-la Bel "> Confirm password </span> <input type=" password "ng-model=" Data.confirmpassword "required placeholder=" please confirm login secret Code "> </label> <label class=" Item "> <button class=" button Button-block Button-po
    Sitive "type=" Submit "ng-disabled=" DataForm. $invalid "> Confirm changes </button> </label> </div> </form> </ion-content> </ion-view>

We just need to nest a form outside if the controller needs extra validation or something else you can give him a name name, if you don't need it.

Controller

======================== Change Password ===========================
. Controller (' Updatepwdctrl ', function ($scope, $ State, $ionicHistory, Loginservice, popuputil) {
	$scope. data = {};
	$scope. backbtn = function () {
		$ionicHistory. GoBack ();
	};	
	$scope. Save = function (dataForm) {
		if (dataForm. $valid) {//succeeded to true otherwise false
			$scope. Changpassword ();
		}
	}
	
	$scope. Changpassword = function () {
			
			if ($scope. Data.confirmpassword = = $scope. Data.newpassword) {
				Delete $scope. Data.confirmpassword;
				Loginservice.changepassword ($scope. Data)
				. $promise. Then (function (RESP) {
					if (resp.success) {//Modify succeeded
						popuputil.showalert (' Hint ', ' password modification succeeded ');
						
						$state. Go (' login ');//Jump login page
						
					}else{
						popuputil.showalert (' Hint ', ' Password modification failed ')}
				}, function (err) {
					
				});
			} else{
				popuputil.showalert (' hint ', ' two times password entered incorrectly ');}
			}
	;}
	
)

Service definition Popuputil

============ Message Bullet Box ============
. Provider (' Popuputil ', function () {this
	. $get = function ($ionicPopup) {
		var popuputil = {};
		Popuputil.showconfirm = function (Titletxt, contenttxt) {
			var confirmpopup = $ionicPopup. Confirm ({
			       title: Titletxt,
			       template:contenttxt
			     });
			return confirmpopup;
		};
		Popuputil.showalert = function (Titletxt, contenttxt) {
			var alert = $ionicPopup. Alert ({
		       title:titletxt,
		       template:contenttxt
		     });
			return alert;
		};
		return popuputil;
	}
})

Service Definition Background Request

. Factory (' Loginservice ', function ($resource) {
	return $resource (', {}, {
		' login ': {//Login
			URL: ' Sec/login ')
			method: ' POST ',
			isarray:false
		},
		' logout ': {//exit
			URL: ' sec/logout ',
			method: ' GET '
			, Isarray:false
		},
		' ChangePassword ': {//Modify password
			URL: ' Sec/changepassword ',
			method: ' POST ',
			Isarray:false
		})
	;
})

This validation cannot be null

If there is a null value then the interface should be like this

If all is not empty the interface should be like this