Quando effettuiamo un invio di un form con AngularJS dobbiamo tenere a mente come quest'ultimo gestisce una richiesta AJAX in POST.
Angular รจ progettato per funzionare al meglio con le API REST. Il servizio $http, a differenza di quanto fa jQuery, non usa il content type application/x-www-form-urlencoded e neppure serializza i dati come query string, ma usa invece JSON per inviare i dati.
La soluzione dipende dalle specifiche del vostro progetto: se tutti i form devono essere inviati nel modo tradizionale, allora dovete operare a livello di applicazione come mostrato nella sezione Setting HTTP heeaders della documentazione ufficiale.
Altrimenti potete impostare gli header e la query string per singola richiesta:
var app = angular.module('MyApp', []);
app.controller('FormCtrl', ['$scope', '$http', function($scope, $http) {
$scope.formData = {};
$scope.send = function() {
if($scope.myForm.$valid) {
var config = {
url: 'api/send',
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param($scope.formData)
};
$http(config).then(function(response) {
// Successo
}, function(response) {
// Errore
});
}
};
}]);
Il codice HTML di riferimento:
<body ng-app="MyApp">
<form name="myForm" method="post" ng-controller="FormCtrl" ng-submit="send()" novalidate>
<div>
<input type="text" name="nome" placeholder="Nome" ng-model="formData.firstname" class="form-control" required />
</div>
<!-- Altri campi -->
<p><input type="submit" class="btn btn-primary" value="Invia" /></p>
</form>
</body>