Fetch Form Werte in AngularJs

Ich bin neu in AngularJS. Ich erstelle eine Einzelseitenanwendung, in der ein Formular aus mehreren Schritten besteht. Ich habe Knöpfe und Eingabefelder benutzt. Das Formular wird gesendet. Ich möchte die Werte der Formularfelder abrufen, aber ich weiß nicht, wie ich das machen soll. Ich habe meinen Code hinzugefügt. Ich möchte sehen, welcher Benutzer füllt, also kann ich die Werte in der Datenbank speichern. Wie bekomme ich meine Werte im Konsolenprotokoll? Bitte führe mir jemanden, wie es geht.Fetch Form Werte in 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>

Quelle

2016-03-23 user5397448

Mein Vorschlag ist für alle Ihre ng-Modelleingaben Datenobjekt zu verwenden.

das ist mein JSFiddle Beispiel: 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); 
    } 

};

Quelle

2016-03-23 11:38:21

wie i-Taste Typ Wert erfassen kann? – user5397448

Auf die gleiche Weise. Fügen Sie ng-model = 'data.customValue' hinzu ... –

Fetch Form Werte in AngularJs

Antwort

Verwandte Themen