Angular einfaches Formular senden
-
Die einfache Formularübermittlung mit der
ng-model-Methode in Angular -
Das einfache Absenden des Formulars mit der
ng-submit-Methode in Angular
Während es ziemlich einfach ist, Formulare in regulärem HTML einzureichen, kann es für Angular eine ziemliche Tortur sein. Angular würde die Übermittlung von Formularen ständig unterbrechen, um Ihnen die Möglichkeit zu geben, die Daten vor dem Absenden zu manipulieren.
Wir werden uns Methoden ansehen, die eine erfolgreiche Formularübermittlung in AngularJS ermöglichen.
Zuerst schauen wir uns die ng-model-Methode an, die alle Daten in einem Eingabe- oder Textbereich sammelt und daraus ein Element macht, das der Benutzer sehen kann.
Die ng-submit-Methode bietet uns jedoch mehr Kontrolle über die Daten, die wir übermitteln. Wenn in einer Eingabe keine Aktion oder kein Element vorhanden ist, verhindert ng-submit das Absenden des Formulars.
Denken Sie daran, dass wir es hier mit AngularJS zu tun haben, nicht mit dem regulären Angular. Wir werden also hauptsächlich mit HTML und app.js arbeiten.
Die einfache Formularübermittlung mit der ng-model-Methode in Angular
Für die ng-model-Methode richten wir HTML wie folgt ein:
<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>
Dann schreiben wir in die app.js diese 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*/
});
};
});
In $scope.data werden alle Daten für die Übermittlung gespeichert.
Das einfache Absenden des Formulars mit der ng-submit-Methode in Angular
Das ng-submit bietet viel weniger und unkompliziertere Codierung.
Für 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>
Dann in der 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