Trying to get Angular form data in JSON format

▲
0
▼

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 = "Mark@gmail.com";
  }
  $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 = "Mark@gmail.com";
}

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 = "Mark@gmail.com";
}

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?

html
angularjs
json
forms
asked on Stack Overflow Aug 17, 2017 by Mark Schuurman • edited Aug 17, 2017 by Ivan

2 Answers

▲
1
▼

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

answered on Stack Overflow Aug 17, 2017 by user1608841
▲
0
▼

Fixed code:

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

        mainApp.controller('formulierController', function ($scope) {
            var vm = this;
            vm.reset = function () {

                vm.voornaam = "Mark";
                vm.achternaam = "Schuurman";
                vm.afdeling = "ICT";
                vm.geboortedatum = new Date("Jan, 01, 0000");
                vm.telefoon = +31412123456;
                vm.inschrijvingsdatum = new Date("Jan, 01, 0000");
                vm.mobiel = +31612345678;
                vm.email = "Mark@gmail.com";
            }
            vm.reset();

            vm.showJson = function () {
                vm.json = angular.toJson([
                  vm.voornaam,
                  vm.achternaam,
                  vm.afdeling,
                  vm.geboortedatum,
                  vm.telefoon,
                  vm.inschrijvingsdatum,
                  vm.mobiel,
                  vm.email
                ]);
            }
        });
<html>
<head>
    <title>Angular JS Forms</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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">

    <style>
        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;
            }
    </style>
</head>
<body>

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

        <form name="formulier" novalidate>
            <table border="0">
                <tr>
                    <td>Voornaam:</td>
                    <td>
                        <input name="voornaam" type="text" ng-model="ctrl.voornaam" required>
                    </td>
                </tr>

                <tr>
                    <td>Achternaam: </td>
                    <td>
                        <input name="achternaam" type="text" ng-model="ctrl.achternaam" required>
                    </td>
                </tr>

                <tr>
                    <td>Afdeling: </td>
                    <td>
                        <input name="afdeling" type="text" ng-model="ctrl.afdeling" required>
                    </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="ctrl.geboortedatum" placeholder="dd-MM-yyyy" required>
        
                    </td>
                </tr>

                <tr>

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

                        <input name="telefoon" type="tel" ng-model="ctrl.telefoon" required>
     
                    </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="ctrl.inschrijvingsdatum" placeholder="dd-MM-yyyy" required>
                    </td>
                </tr>

                <tr>

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

                        <input name="mobiel" type="tel" ng-model="ctrl.mobiel" required>
                    </td>
                </tr>

                <tr>
                    <td>Email: </td>
                    <td>
                        <input name="email" type="email" ng-model="email" length="100" required>
 
                    </td>
                </tr>

                <tr>
                    <td>
                        <button ng-click="reset()">Reset</button>
                    </td>
                    <td>
                        <button>
                            Submit
                        </button>
                    </td>
                </tr>
            </table>

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

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

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

</body>
</html>

Always use "Controller as" - this is recommended

answered on Stack Overflow Aug 17, 2017 by Krzysztof Raciniewski

User contributions licensed under CC BY-SA 3.0