Soumission de formulaire en Angular
-
La soumission de formulaire simple à l’aide de la méthode
ng-modeldans Angular -
La soumission de formulaire simple à l’aide de la méthode
ng-submitdans Angular
Bien qu’il soit assez simple de soumettre des formulaires en HTML standard, cela peut être une véritable épreuve pour Angular. Angular interromprait constamment les soumissions de formulaires pour vous donner la possibilité de manipuler les données avant de les soumettre.
Nous examinerons les méthodes qui permettront une soumission de formulaire réussie sur AngularJS.
Tout d’abord, nous examinerons la méthode ng-model, qui collecte toutes les données dans une zone de saisie ou de texte et en fait un élément que l’utilisateur peut visualiser.
Cependant, la méthode ng-submit nous offre plus de contrôle sur les données que nous soumettons. S’il n’y a pas d’action ou d’élément dans une entrée, ng-submit empêche la soumission du formulaire.
Rappelez-vous, nous avons affaire ici à AngularJS, pas à Angular. Ainsi, nous travaillerons principalement avec le HTML et app.js.
La soumission de formulaire simple à l’aide de la méthode ng-model dans Angular
Pour la méthode ng-model, nous allons paramétrer le HTML comme ceci :
<div ng-app="myApp">
<form name="saveTemplateData" action="#" ng-controller="FormCtrl">
First name: <br /><input type="text" name="form.firstname" /> <br /><br />
Email Address: <br /><input type="text" ng-model="form.emailaddress" />
<br /><br />
<textarea rows="3" cols="25">
Describe your reason for submitting this form </textarea
>
<br /><br />
<input type="radio" ng-model="form.gender" value="female" />Female
<input type="radio" ng-model="form.gender" value="male" />Male <br />
<br /><br />
<input type="checkbox" ng-model="form.member" value="true" /> Already a
member <input type="checkbox" ng-model="form.member" value="false" /> Not a
member
<br /><br />
<input type="file" ng-model="form.file_profile" id="file_profile" /><br />
<input type="file" ng-model="form.file_avatar" id="file_avatar" />
<br /><br />
<input type="submit" ngClick="Submit" />
</form>
</div>
Puis dans le app.js, on écrit ces codes :
import angular from 'angular';
import '@uirouter/angularjs';
var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
$scope.data = {
firstname: 'default',
emailaddress: 'default',
gender: 'default',
member: false,
file_profile: 'default',
file_avatar: 'default',
};
$scope.submitForm = function () {
console.log('posting data....');
$http
.post(
'http://posttestserver.com/post.php?dir=jsfiddle',
JSON.stringify(data)
)
.success(function () {
/*success callback*/
});
};
});
Le $scope.data est l’endroit où toutes les données sont stockées pour la soumission.
La soumission de formulaire simple à l’aide de la méthode ng-submit dans Angular
Le ng-submit offre un codage beaucoup moins nombreux et simple.
Pour le HTML :
<!DOCTYPE html>
<html>
<head>
<title>Form input text</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form ng-submit="submit(form)" >
Firstname: <input type="text" ng-model="form.firstname" /><br />
Lastname: <input type="text" ng-model="form.lastname" /><br />
<hr />
<input type="submit" value="Submit" />
</form>
<hr />
<p>Firstname: {{ form.firstname }}</p>
<p>Lastname: {{ form.lastname }}</p>
<pre>Submit Form: {{ formData }} </pre>
</div>
</body>
</html>
Puis dans le app.js :
import angular from 'angular';
import '@uirouter/angularjs';
var app = angular.module('myApp', []);
app.controller('myCtrl', [
'$scope',
function ($scope) {
$scope.submit = function (formData) {
$scope.formData = formData;
console.log(formData); // object
console.log(JSON.stringify(formData)); // string
};
},
]);
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn