Angular - Use Form Post Values In Controller

I'm writing my first application in AngularJS, and I'm new to javascript. I have a simple question: How do I use POST values from an html form in an angular controller? I have a

Solution 1:

When you set the input with ng-model="email", then you can access those variable values in controller by just calling $scope.email.

Case-1: For single value

HTML

<inputtype="text" ng-model="email" />

Angular Controller

console.log($scope.email);

Case-2: For multiple values

HTML

<inputtype="text" ng-model="user.firstname" />
<inputtype="text" ng-model="user.lastname" />
<inputtype="text" ng-model="user.email" />

Angular Controller

//This will print the all the values (firstname, lastname, email) containsuseras object.
console.log($scope.user);

Please check this working snippet to see the real time example

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
  $scope.user = {};
  $scope.signup = function(){
      console.log($scope.user);
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app="myApp"><formname="signupForm"ng-controller="FormCtrl"ng-submit="signup()"><inputtype="text"placeholder="Name..."ng-model="user.name"name="name"required /><inputtype="email"name="email"ng-model="user.email"placeholder="Email..."required><inputtype="password"placeholder="Password..."ng-model="user.password"name="password"requiredng-minlength="7"ng-maxlength="50"/><buttontype="submit">Sign Up</button></form></body>

Solution 2:

You need to use $scope for binding ng-model's value as shown as follow...

$scope.signup = function() {
             data={
                      name: $scope.name,
                      email: $scope.email,
                      password: $scope.password
                  }
              $http.post('http://myapi.com/api/authenticate/signup',data).then(function(response) {
                // etc 
                     });

Solution 3:

HTML

<formname="signupForm"novalidate><inputtype="text"placeholder="Name..."ng-model="user.name"name="name"required /><inputtype=“email" name="email"ng-model="user.email"placeholder="Email..."required><inputtype="password"placeholder="Password..."ng-model="user.password"name="password"requiredng-minlength="7"ng-maxlength="50"/><buttontype="button"ng-click="auth.signup()">Sign Up</button>

JS

functionSignupController($http, $scope, $rootScope, $location) {
   $scope.user={};
  vm.signup = function(name, email, password, onSuccess, onError) {

      $http.post('http://myapi.com/api/authenticate/signup',
      {
          name: $scope.user.name,
          email: $scope.user.email,
          password: $scope.user.password
      }).then(function(response) {
        // etc 

Solution 4:

In your html

<formname="signupForm"novalidateng-submit="vm.signup()"><inputtype="text"placeholder="Name..."ng-model="name"name="vm.user.name"required /><inputtype=“email" name="email"ng-model="vm.user.email"placeholder="Email..."required><inputtype="password"placeholder="Password..."ng-model="vm.user.password"name="password"requiredng-minlength="7"ng-maxlength="50"/><buttontype="submit">Sign Up</button></form>

In your controller

functionSignupController($http, $scope, $rootScope, $location) {
   vm.user = {};

   vm.signup = function() {
       // validate here// send data$http
          .post('http://myapi.com/api/authenticate/signup', vm.user)
          .then(function(response) {
            // handle success 
           });
   };
}

Solution 5:

Three ways you can do

Type 1 With individual params

HTML

   <form name="signupForm" novalidate>
     <inputtype="text" placeholder="Name..." ng-model="name" name="name" required />
     <inputtype="email" name="email" ng-model="email" placeholder="Email..." required />
     <inputtype="password" placeholder="Password..." ng-model="password" name="password" ng-minlength="7" ng-maxlength="50" required/>
     <button type="button" ng-click="auth.signup(name, email, password)">Sign Up</button>
  </form>

JS

vm.signup = function(name, email, password) {
      $http.post('http://myapi.com/api/authenticate/signup',
      {
          name: name,
          email: email,
          password: password
      }).then(function(response) { });              
    }

Type 2 With object as param

HTML

     <form name="signupForm" novalidate>
       <inputtype="text" placeholder="Name..." ng-model="user.name" name="name" required />
      <inputtype="email" name="email" ng-model="user.email" placeholder="Email..." required />
      <inputtype="password" placeholder="Password..." ng-model="user.password" name="password" ng-minlength="7" ng-maxlength="50" required/>
      <button type="button" ng-click="auth.signup(user)">Sign Up</button>
    </form>

JS

vm.signup = function(data) {
      $http.post('http://myapi.com/api/authenticate/signup', data)
        .then(function(response) {
      });              
  }

Type 3 Using $scope

HTML

     <form name="signupForm" novalidate>
       <inputtype="text" placeholder="Name..." ng-model="user.name" name="name" required />
       <inputtype="email" name="email" ng-model="user.email" placeholder="Email..." required />
       <inputtype="password" placeholder="Password..." ng-model="user.password" name="password" ng-minlength="7" ng-maxlength="50" required/>
       <button type="button" ng-click="auth.signup()">Sign Up</button>
    </form>

JS

vm.signup = function() {
        $http.post('http://myapi.com/api/authenticate/signup', $scope.data)
            .then(function(response) {
      });              
 }

It will work in all these ways.

Checkout the working demo of best solution among these three Demo: https://jsbin.com/rimemi/25/edit?html,js,console,output