Ottenere i valori dei form con AngularJS è estremamente semplice grazie al data binding.
Se usate jQuery sapete che i valori dei campi possono essere intercettati solo al momento dell'invio del form tramite il metodo .serialize() o singolarmente tramite il metodo .val().
In Angular invece il data binding ci consente di leggere e aggiornare i valori in tempo reale: grazie alla direttiva ng-model ciascun valore diviene il valore di una proprietà dello scope del controller che gestisce il form o la view corrente.
Se definiamo il seguente controller:
var app = angular.module('MyApp', []);
app.controller('FormCtrl', ['$scope', function($scope) {
$scope.formData = {}; // Qui i valori dei campi
$scope.submitted = false;
$scope.output = '';
$scope.submit = function() {
$scope.output = JSON.stringify($scope.formData);
$scope.submitted = true;
};
}])
Possiamo legare (binding) i valori dei campi all'oggetto formData in questo modo:
<body ng-app="MyApp">
<form novalidate method="post" ng-controller="FormCtrl" ng-submit="submit()">
<p>
<input type="text" class="form-control" name="nome" placeholder="Nome" ng-model="formData.firstname" />
</p>
<p>
<input type="text" class="form-control" name="cognome" placeholder="Cognome" ng-model="formData.lastname" />
</p>
<p>
<input type="text" class="form-control" name="email" placeholder="E-mail" ng-model="formData.email" />
</p>
<p><input type="submit" class="btn btn-primary" value="Invia" /></p>
<p><code>{{formData}}</code></p>
<pre ng-show="submitted">
{{output}}
</pre>
</form>
</body>
Le proprietà firstname, lastname e email verrano create automaticamente e aggiornate man mano che l'utente interagisce con il form. Non c'è più bisogno di usare il DOM come in jQuery.