Registration and validation form with angularjs

Question

I have a problem with a registration form on angularjs, I want to controle the form before submit and how can i save user data in text file or json (any solution for saving data), I did not manage to do it. For more information, I am working on a project : Interface for ReafctorErl public server - javascript (angular based).

registration.html :

 <div class="register"> <div class="box"> <h4> Sign Up</h4> <p> Enter your personal details below: </p> </br> <form role="frmRegister" name="frmRegister" ng-submit="register()" > <div class="form-group"> <input class="form-control" type="text" id="fullname" placeholder="Full Name" ng-model="credentials.fullname"/> </div> <div class="form-group"> <input class="form-control" type="text" id="organisation :" placeholder="Organisation" ng-model="credentials.organisation" /> </div> <div class="form-group"> <input class="form-control" type="text" id="address :" placeholder="Address" ng-model="credentials.address" /> </div> <p> Enter your account details below: </p> <div class="form-group"> <input class="form-control" type="email" id="email" placeholder="Email" ng-model="credentials.email" /> </div> <div class="form-group"> <input class="form-control" type="text" id="username" placeholder="Username" ng-model="credentials.username" /> </div> <div class="form-group" > <input class="form-control" type="password" id="password" placeholder="Password" ng-model="credentials.password" /> </div> <div class="form-group" > <input class="form-control" type="password" id="password_again" placeholder="Password again" ng-model="credentials.password_again" /> </div> <div class="form-actions"> <a href="#/login" class="btn btn-link">Back</a> <button type="submit" class="btn btn-primary" onclick="return verif();">Submit</button> </div> </br> </form> </div> </div> <script language="javascript"> function verif(){ if (document.getElementById('password').value != document.getElementById('password_again').value) { document.getElementById('password_again').setCustomValidity('Passwords must match.'); } else { document.getElementById('password_again').setCustomValidity(''); } } </script> 

the controller file :

 'use strict'; function RegisterCtrl($scope, reg) { var credentials = { fullname: "", organisation: "", address: "", email: "", username: "", password: "", password_again: "" }; $scope.credentials = credentials; $scope.restricted = window.restrictedMode; $scope.register = function() { if( $scope.frmRegister.fullname.length<1 ) { alert("Full Name required!"); return false; } if( $scope.credentials.organisation.length<1 ) { alert("Organisation required!"); return false; } if( $scope.credentials.address.length<1 ) { alert("Address required!"); return false; } if( $scope.credentials.email.length<1 ) { alert("Email required!"); return false; } if( $scope.credentials.username.length<1 ) { alert("Username required!"); return false; } if( $scope.credentials.password.length<3 ) { alert("Password required!"); return false; } if( $scope.credentials.password_again.length<3 ) { alert("Password again required!"); return false; } reg.register($scope.credentials.fullname, $scope.credentials.organisation, $scope.credentials.address, $scope.credentials.email, $scope.credentials.username, $scope.credentials.password, $scope.credentials.password_again, true); }; } 

Service file is :

 'use strict'; /*just trying todo something here */ angular.module('referl.services').service('reg', function($q, $http, $location, $rootScope, $window) { var reg = { register: function(fullname, organisation, address, email, username, password, password_again, navigateOnSuccess) { var parameters = { fullname: fullname, organisation: organisation, address: address, email: email, username: username, password: password, password_again: password_again }; $http.get("api/register", {params: parameters}).success(function(response) { if(response.error) { alert(response.error); } else { alert("Success"); } }); } }; $rootScope.reg = reg; return reg; }); 

Any help please ?? Thank you!

Answer 1

Better to follow https://docs.angularjs.org/guide/forms for html page that will reduce your angular controller code. and you can focus on service validation

Follow Binding to form and control state section of above link how to validate form.

Answer 2

To your input text's u can use: ng-pattern and attribute required

<form name="exampleForm" class="form-horizontal">
 <div class="form-group">
    <input class="form-control" type="text" id="fullname" placeholder="Full Name" ng-model="credentials.fullname" ng-pattern="INSERT PATTERN" required/>
  </div>
</form>

to find patterns you can see here:

HTML5 pattern

and for valite the whole form

<button class="btn btn-primary" ng-click="myFunction()" ng-disabled="exampleForm.$invalid">Button</button>