Envío de formulario en Angular
-
El formulario simple de envío usando el método
ng-modelen Angular -
El envío de formulario simple usando el método
ng-submiten Angular
Si bien es bastante simple enviar formularios en HTML normal, puede ser una gran prueba para Angular. Angular interrumpiría constantemente los envíos de formularios para darle la oportunidad de manipular los datos antes de enviarlos.
Veremos métodos que permitirán el envío exitoso de formularios en AngularJS.
Primero, veremos el método ng-model, que recopila todos los datos en un área de entrada o texto y los convierte en un elemento que el usuario puede ver.
Sin embargo, el método ng-submit nos ofrece más control sobre los datos que enviamos. Si no hay ninguna acción o elemento en una entrada, ng-submit evita que se envíe el formulario.
Recuerde, estamos tratando con AngularJS aquí, no con el Angular normal. Así, trabajaremos principalmente con los HTML y app.js.
El formulario simple de envío usando el método ng-model en Angular
Para el método ng-model, configuraremos el HTML así:
<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>
Luego en el app.js, escribimos estos códigos:
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*/
});
};
});
El $scope.data es donde se almacenan todos los datos para su envío.
El envío de formulario simple usando el método ng-submit en Angular
El ng-submit ofrece una codificación mucho menor y directa.
Para el 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>
Luego en el 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