在angularjs形式验证后获取输入值

时间:2014-10-11 08:02:21

标签: javascript angularjs codeigniter twitter-bootstrap codeigniter-2

大家好,我是Angularjs和Bootstrap的新手。现在我使用Angularjs和Bootstrap css创建了登录表单。 以下是我的表格

              <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>

我的应用脚本为

                   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> 

现在我的问题是如何在角度应用程序验证后获得以上表单输入值,并将它们发送到Codeigniter控制器进行身份验证。 提前谢谢。

1 个答案:

答案 0 :(得分:1)

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