Question

我是AngularJS的新手。我正在创建单页面应用程序，其中表单由多个步骤组成。我使用了按钮和输入字段。表格已提交。我想获取表单字段值，但我不知道如何做到这一点。我添加了我的代码。我想看看用户正在填写什么，以便我可以将值存储在数据库中。如何在控制台日志中获取我的值。请有人指导我怎么做。

// 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';
   		};

  });

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

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

Answer 1

我的建议是将数据对象用于所有ng-model输入。

这是我的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);
    }

};

在AngularJs中获取表单值

1 个答案: