Mark Schuurman Mark Schuurman - 1 year ago 57
AngularJS Question

Trying to get Angular form data in JSON format



var mainApp = angular.module("mainApp", []);

mainApp.controller('formulierController', function($scope) {
$scope.reset = function() {

$scope.voornaam = "Mark";
$scope.achternaam = "Schuurman";
$scope.afdeling = "ICT";
$scope.geboortedatum = new Date("Jan, 01, 0000");
$scope.telefoon = +31412123456;
$scope.inschrijvingsdatum = new Date("Jan, 01, 0000");
$scope.mobiel = +31612345678;
$scope.email = "[email protected]";
}
$scope.reset();

$scope.showJson = function() {
$scope.json = angular.toJson($scope.user);
}
});

table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}

<html>

<head>
<title>Angular JS Forms</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

</head>

<body>

<h2>AngularJS Formulier</h2>
<div ng-app="mainApp" ng-controller="formulierController">

<form name="formulier" novalidate>
<table border="0">
<tr>
<td>Voornaam:</td>
<td>
<input name="voornaam" type="text" ng-model="voornaam" required>
<span style="color:red" ng-show="formulier.voornaam.$dirty && formulier.voornaam.$invalid">
<span ng-show="formulier.voornaam.$error.required">Voornaam is verplicht.</span>
</span>
</td>
</tr>

<tr>
<td>Achternaam: </td>
<td>
<input name="achternaam" type="text" ng-model="achternaam" required>
<span style="color:red" ng-show="formulier.achternaam.$dirty && formulier.achternaam.$invalid">
<span ng-show="formulier.achternaam.$error.required">Achternaam is verplicht.</span>
</span>
</td>
</tr>

<tr>
<td>Afdeling: </td>
<td>

<input name="afdeling" type="text" ng-model="afdeling" required>
<span style="color:red" ng-show="formulier.afdeling.$dirty && formulier.afdeling.$invalid">
<span ng-show="formulier.afdeling.$error.required">Afdeling is vereist.</span>
</span>
</td>
</tr>

<tr>
<td>Geboortedatum: </td>

<td>
<!--<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />-->

<input name="geboortedatum" type="date" id="datepicker1" ng-model="geboortedatum" placeholder="dd-MM-yyyy" required>
<span style="color:red" ng-show="formulier.geboortedatum.$dirty && formulier.geboortedatum.$invalid">
<span ng-show="formulier.geboortedatum.$error.required">Geboortedatum is vereist.</span>
<!--<span ng-show="formulier.geboortedatum.$error.email">Geen geldige datum.</span>-->
</span>
</td>
</tr>

<tr>

<td>Telefoon: </td>
<td>

<input name="telefoon" type="tel" ng-model="telefoon" required>
<span style="color:red" ng-show="formulier.telefoon.$dirty && formulier.telefoon.$invalid">
<span ng-show="formulier.telefoon.$error.required">Telefoonnummer is vereist.</span>
<span ng-show="formulier.telefoon.$error.number">Geen geldig getal.</span>
</span>
</td>
</tr>

<tr>
<td>Inschrijvingsdatum: </td>

<td>
<!--<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />-->

<input name="inschrijvingsdatum" type="date" id="datepicker2" ng-model="inschrijvingsdatum" placeholder="dd-MM-yyyy" required>
<span style="color:red" ng-show="formulier.inschrijvingsdatum.$dirty && formulier.inschrijvingsdatum.$invalid">
<span ng-show="formulier.inschrijvingsdatum.$error.required">Inschrijvingsdatum is vereist.</span>
<!--<span ng-show="formulier.inschrijvingsdatum.$error.email">Geen geldige datum.</span>-->
</span>
</td>
</tr>

<tr>

<td>Mobiel: </td>
<td>

<input name="mobiel" type="tel" ng-model="mobiel" required>
<span style="color:red" ng-show="formulier.mobiel.$dirty && formulier.mobiel.$invalid">
<span ng-show="formulier.mobiel.$error.required">Mobiel nummer is vereist.</span>
<span ng-show="formulier.mobiel.$error.number">Geen geldig getal.</span>
</span>
</td>
</tr>

<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="formulier.email.$dirty && formulier.email.$invalid">
<span ng-show="formulier.email.$error.required">Email is verplicht.</span>
<span ng-show="formulier.email.$error.email">Ongeldig e-mailadres.</span>
</span>
</td>
</tr>

<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="formulier.voornaam.$dirty &&
formulier.voornaam.$invalid || formulier.achternaam.$dirty &&
formulier.achternaam.$invalid || formulier.afdeling.$dirty &&
formulier.afdeling.$invalid || formulier.geboortedatum.$dirty &&
formulier.geboortedatumail.$invalid || formulier.telefoon.$dirty &&
formulier.telefoon.$invalid || formulier.inschrijvingsdatum.$dirty &&
formulier.inschrijvingsdatum.$invalid || formulier.mobiel.$dirty &&
formulier.mobiel.$invalid || formulier.email.$dirty &&
formulier.email.$invalid" ng-click="submit()">
Submit
</button>
</td>
</tr>
</table>

<div id="settingsholder" ng-controller="formulierController">
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr /> {{voornaam | json}} {{mobiel | json}}
</div>
</form>
</div>

<script>
$(function() {
$("#datepicker1, #datepicker2").datepicker();
});
</script>

</body>

</html>





I am creating an AngularJS form and after filling in the form to get the data in JSON format. To get JSON data from this form works but I can't get JSON of the complete form.

I tried to create a user object in the $scope variable by changing

$scope.reset = function () {
$scope.voornaam = "Mark";
$scope.achternaam = "Schuurman";
$scope.afdeling = "ICT";
$scope.geboortedatum = new Date("Jan, 01, 0000");
$scope.telefoon = +31412123456;
$scope.inschrijvingsdatum = new Date("Jan, 01, 0000");
$scope.mobiel = +31612345678;
$scope.email = "[email protected]";
}


in

$scope.reset = function () {
$scope.user.voornaam = "Mark";
$scope.user.achternaam = "Schuurman";
$scope.user.afdeling = "ICT";
$scope.user.geboortedatum = new Date("Jan, 01, 0000");
$scope.user.telefoon = +31412123456;
$scope.user.inschrijvingsdatum = new Date("Jan, 01, 0000");
$scope.user.mobiel = +31612345678;
$scope.user.email = "[email protected]";
}


and

<input type="button" ng-click="showJson()" value="Object To JSON" /><hr />
{{voornaam | json}}
</div>


in

<input type="button" ng-click="showJson()" value="Object To JSON" /> <hr />
{{user| json}}
</div>


For every input field, I changed the ng-model

<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="formulier.email.$dirty && formulier.email.$invalid">
<span ng-show="formulier.email.$error.required">Email is verplicht.</span>
<span ng-show="formulier.email.$error.email">Ongeldig e-mailadres.</span>
</span>
</td>
</tr>


to

<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="user.email" length="100" required>
<span style="color:red" ng-show="formulier.email.$dirty && formulier.email.$invalid">
<span ng-show="formulier.email.$error.required">Email is verplicht.</span>
<span ng-show="formulier.email.$error.email">Ongeldig e-mailadres.</span>
</span>
</td>
</tr>


But I receive the following error:


0x800a138f - JavaScript runtime error: Unable to get property
voornaam
of
undefined
or
null
reference.


How can I display the total content of the form in JSON format?

Answer Source

Please refer this jsfiddle link with all your fixed code : You have to initialize $scope.user={} in your controller.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download