AngularJsでフォームの値を取得

AngularJSの新機能です。私はフォームが複数のステップからなる単一ページアプリケーションを作成しています。私はボタンと入力フィールドを使いました。フォームが提出されています。私はフォームフィールドの値を取得したいが、私はそれを行う方法を知らない。私は自分のコードを追加しました。私はデータベースに値を格納することができるように、ユーザーが何を充填しているのか見たいと思っています。コンソールログで自分の値を取得するにはどうしたらいいですか？私にそれをする方法を教えてください。AngularJsでフォームの値を取得

// Code goes here 
 

 
var app = angular.module("MyApp", ["ngAnimate"]); 
 
    
 
    app.controller('MyCtrl', function($scope, $timeout) { \t   \t 
 

 
    $scope.submitForm = function(isValid) { 
 
    // check to make sure the form is completely valid 
 
    if (isValid) { 
 
     alert('our form is amazing'); 
 
     console.log(myform); 
 
    } 
 
    }; 
 
    \t  \t $scope.sliderValue = null; 
 
    \t \t \t $scope.name = '';  
 
    \t \t \t $scope.data = { 
 
    \t \t singleSelect: null, 
 
    \t \t multipleSelect: [], 
 
    \t \t option1: 'option-1', 
 
    \t \t }; 
 
\t \t $scope.forceUnknownOption = function() { 
 
     \t \t $scope.data.singleSelect = 'nonsense'; 
 
    \t \t }; 
 

 
    });

.circle 
 
    { 
 
    width:125px; 
 
    height:125px; 
 
\t border:2px solid #FFF; \t 
 
    border-radius:62.5px; 
 
    font-size:18px; 
 
    color:#fff; 
 
    line-height:125px; 
 
    text-align:center; 
 
    background:#67508F 
 
    }

<!DOCTYPE html> 
 
<html ng-app="MyApp" lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 

 
<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)"> 
 

 
<div ng-show="step==1"> 
 
    <h3>Which step</h3> 
 
<div ng-form='step1form'> 
 
<button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 4">Go to step 4</button> 
 
<button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 2">Go to step 2</button> 
 
</div> 
 
</div> 
 

 
<div ng-show="step==2"> 
 
<h3 class="zoomIn">which step</h3> 
 
<div ng-form='step2form'> 
 
<div class="circle zoomIn" ng-disabled="!step2form.$valid" ng-click="step = 4"><span>Go to step 3</span></div> 
 
</div> 
 
</div> 
 

 
<div ng-show="step==4"> 
 
<h3 class="zoomIn">Personal Details</h3> 
 
<div ng-form='step14form'> 
 
<input ng-model="FirstName" name="FirstName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="First Name" required> 
 
<p class="ErrorMessage" ng-show="step4form.FirstName.$error.pattern">Please enter a valid First name.</p> 
 
<input ng-model="LastName" name="LastName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="Last Name" required> 
 
<p class="ErrorMessage" ng-show="step4form.LastName.$error.pattern">Please enter a valid Last name.</p> 
 
<input ng-model="Phone" name="Phone" type="text" ng-pattern ="/^[789]\d{9}$/" class="zoomIn" placeholder="Phone" required> 
 
<p class="ErrorMessage" ng-show="step4form.Phone.$error.pattern">Please enter a valid phone number.</p> 
 
<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> 
 
<p class="ErrorMessage" ng-show="step4form.Email.$error.pattern">Please enter a valid email address.</p> 
 
</div> 
 
<button type="submit" id="submit" class="Submit" ng-disabled="!myform.$valid" ng-click="submit()">Submit</button> 
 
</div> 
 

 
</form> 
 

 
<script>document.write("<base href=\"" + document.location + "\" />");</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script> 
 
<script src="script.js"></script> 
 
</body> 
 
</html>

出典

2016-03-23 user5397448

私の提案は、あなたのNG-モデル入力のすべてのデータオブジェクトを使用することです。

これは私のJSFiddle例です：JSFiddle

HTML：

<div ng-app> 
    <form ng-controller="FormController" name="myForm"> 
     <div class="header padding-b--10">Form Area</div> 
      <div class="padding-b--10"> 
       <input name="empId" placeholder="Employee ID" ng-model="data.empId" 
         style="padding:5px" required/> 
       <span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span> 
      </div> 
      <div class="padding-b--10"> 
       <input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail" 
         style="padding:5px" required/> 
       <span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span> 
      </div> 
      <input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid"> 
      <pre>{{data}}</pre> 
      <pre>myForm.empId.$valid = {{myForm.empId.$valid}}</pre> 
      <pre>myForm.empEmail.$valid = {{myForm.empEmail.$valid}}</pre> 
    </form> 
</div>

JS：

function FormController($scope){ 

    $scope.invalid = "Invalid"; 

    $scope.submit = function(){ 
     console.log($scope.data); 
    } 

};

出典

2016-03-23 11:38:21

どのように私は、ボタン型の値をキャプチャしていますか？ – user5397448

同じように。追加ng-model = 'data.customValue' ... –

AngularJsでフォームの値を取得

答えて

関連する問題