title: fetch form values in AngularJs
body: <p>I am new to AngularJS. I am creating single page application in which a form consists of multiple steps. I have used buttons and input fields. Form is getting submitted. I want to fetch the form fields values but i don't know the ways to do it. I have added my code. I want to see what user is filling so i can store the values in database. How do i get my values in console log.? Please someone guide me how to do it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here
  
  var app = angular.module("MyApp", ["ngAnimate"]);
   
    app.controller('MyCtrl', function($scope, $timeout) {         
  
    $scope.submitForm = function(isValid) {
      // check to make sure the form is completely valid
      if (isValid) {
        alert('our form is amazing');
          console.log(myform);
      }
    };
          $scope.sliderValue = null;
         $scope.name = '';    
          $scope.data = {
        singleSelect: null,
         multipleSelect: [],
         option1: 'option-1',
       };
       $scope.forceUnknownOption = function() {
         $scope.data.singleSelect = 'nonsense';
       };
  
    });
    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle
      {
      width:125px;
      height:125px;
    border:2px solid #FFF;  
      border-radius:62.5px;
      font-size:18px;
      color:#fff;
      line-height:125px;
      text-align:center;
      background:#67508F
      }
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MyApp" lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MyCtrl"&gt;
  
  &lt;form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)"&gt;
  
  &lt;div ng-show="step==1"&gt;
    &lt;h3&gt;Which step&lt;/h3&gt;
  &lt;div ng-form='step1form'&gt;
  &lt;button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 4"&gt;Go to step 4&lt;/button&gt;
  &lt;button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 2"&gt;Go to step 2&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div ng-show="step==2"&gt;
  &lt;h3 class="zoomIn"&gt;which step&lt;/h3&gt;
  &lt;div ng-form='step2form'&gt;
  &lt;div class="circle zoomIn" ng-disabled="!step2form.$valid" ng-click="step = 4"&gt;&lt;span&gt;Go to step 3&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div ng-show="step==4"&gt;
  &lt;h3 class="zoomIn"&gt;Personal Details&lt;/h3&gt; 
  &lt;div ng-form='step14form'&gt;
  &lt;input ng-model="FirstName" name="FirstName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="First Name" required&gt;
  &lt;p class="ErrorMessage" ng-show="step4form.FirstName.$error.pattern"&gt;Please enter a valid First name.&lt;/p&gt;
  &lt;input ng-model="LastName" name="LastName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn"  placeholder="Last Name" required&gt;
  &lt;p class="ErrorMessage" ng-show="step4form.LastName.$error.pattern"&gt;Please enter a valid Last name.&lt;/p&gt;
  &lt;input ng-model="Phone" name="Phone" type="text" ng-pattern ="/^[789]\d{9}$/" class="zoomIn" placeholder="Phone" required&gt;
  &lt;p class="ErrorMessage" ng-show="step4form.Phone.$error.pattern"&gt;Please enter a valid phone number.&lt;/p&gt;
  &lt;input ng-model="Email" name="Email" type="text" ng-pattern ="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" class="zoomIn"  placeholder="Email" required&gt;
  &lt;p class="ErrorMessage" ng-show="step4form.Email.$error.pattern"&gt;Please enter a valid email address.&lt;/p&gt;
  &lt;/div&gt;
  &lt;button type="submit" id="submit" class="Submit" ng-disabled="!myform.$valid" ng-click="submit()"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;script&gt;document.write("&lt;base href=\"" + document.location + "\" /&gt;");&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>