试图以JSON格式获取Angular表单数据

时间：2017-08-17 08:19:50

标签： html angularjs json forms 

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>

我正在创建一个AngularJS表单，并在填写表单后以JSON格式获取数据。要从此表单中获取JSON数据，但我无法获得完整表单的JSON。

我尝试通过更改

在$ 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 = 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";
}

和

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

在

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

对于每个输入字段，我更改了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>

到

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

但是我收到以下错误：

  

0x800a138f - JavaScript运行时错误：无法获取voornaam或undefined引用的属性null。

如何以JSON格式显示表单的总内容？

2 个答案:

答案 0 :(得分：1)

请使用您的所有固定代码参考此jsfiddle link： 您必须在控制器中初始化$scope.user={}。

答案 1 :(得分：0)

固定代码：

＆＃13;
＆＃13; 
        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
                ]);
            }
        });
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

始终使用＆＃34;控制器作为＆＃34; - 这是推荐的

相关问题
最新问题