AngularJs formundaki getirme form değerleri

AngularJS için yeni. Bir formun birden çok adımdan oluştuğu tek sayfa uygulaması oluşturuyorum. Düğmeler ve giriş alanları kullandım. Form gönderiliyor. Form alanları değerlerini almak istiyorum ama bunu yapmanın yollarını bilmiyorum. Kodumu ekledim. Kullanıcıların ne doldurduğunu görmek istiyorum, böylece değerleri veritabanında saklayabilirim. Değerlerimi konsol günlüğüne nasıl alırım? Lütfen bana nasıl yapılacağını yönlendirin.AngularJs formundaki getirme form değerleri

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

kaynak

2016-03-23 user5397448

Benim önerim ng model girdilerinin tamamı için veri nesnesini kullanmaktır.

bu benim JSFiddle örnektir: 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); 
    } 

};

kaynak

2016-03-23 11:38:21

nasıl ben düğme türü değeri yakalamak? – user5397448

Aynı şekilde. Ng-model = 'data.customValue' ekle ... –

AngularJs formundaki getirme form değerleri

cevap

İlgili konular