Search code examples
javascriptangularjscodeignitertwitter-bootstrapcodeigniter-2

get input value after angularjs form validation


Hello everybody I'm quite new to Angularjs and Bootstrap. Now I have made login form using Angularjs and Bootstrap css. The below is my form

              <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>

    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
        <label>Username</label>
        <input type="text" id="name" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
        <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
    </div>

    <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
        <label>Email</label>
        <input type="email" id="email" name="email" class="form-control" ng-model="user.email">
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    </div>
    <!-- PASSWORD -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
        <label>Password</label>
        <input type="password" id="pass" name="pass" class="form-control" ng-model="user.pass" ng-minlength="3" required>
        <p ng-show="userForm.pass.$invalid && !userForm.pass.$pristine" class="help-block">Your pass is required.</p>
    </div>

    <button id="signIn_1" type="submit" class="btn btn-block signin">Submit</button>

</form>

and my app script is as

                   script>
                                                // create angular app
       var validationApp = angular.module('validationApp', []);

    // create angular controller
           validationApp.controller('mainController', function($scope) {

          $scope.email    = "fsdg@sdf.com";
           $scope.password = "1234";


          // function to submit the form after all validation has occurred          
          $scope.submitForm = function(isValid) {

          // check to make sure the form is completely valid
           if (isValid) {



            };

          });
               </script> 

Now my problem is how can i get above form input values after validation in angular app and send them to Codeigniter controller for authenticate. Thanks in advance.


Solution

  • first declare 
     $scope.user={} in validation controller
     In user object all value is available to you when user type because of ng-model
    
    
       validationApp.controller('mainController', function($scope) {
    
              $scope.email    = "fsdg@sdf.com";
               $scope.password = "1234";
                $scope.user={};//Add this thing 
    
              // function to submit the form after all validation has occurred          
              $scope.submitForm = function(isValid) {
    
              // check to make sure the form is completely valid
               if (isValid) {
                      $http.post('index.php',$scope.user).success(function(response){
    
    });
    
    
                };
    
              });
    
    
    // At server end 
    //  Remember one thing $http send data in json format.So decode it by json_decode