ng-submit στο AngularJS: Χειρισμός υποβολής φόρμας με παράδειγμα
Τζέιμς Χάρτμαν
⚡ Έξυπνη Σύνοψη
Η συνάρτηση ng-submit στο AngularJS συνδέει μια συνάρτηση ελεγκτή με το συμβάν υποβολής του προγράμματος περιήγησης μιας φόρμας, έτσι ώστε οι τιμές που εισάγονται να υποβάλλονται σε επεξεργασία μέσα στον ελεγκτή και η σελίδα να μην φορτώνει ποτέ ξανά μέσω ενός προεπιλεγμένου POST.
Οδηγία AngularJS ng-submit
The ng-υποβολή οδηγία στο AngularJS χρησιμοποιείται για τη σύνδεση της εφαρμογής στο συμβάν υποβολής του προγράμματος περιήγησης. Έτσι στην περίπτωση του AngularJS στο συμβάν υποβολής, μπορείτε να πραγματοποιήσετε κάποια επεξεργασία στον ίδιο τον ελεγκτή και στη συνέχεια να εμφανίσετε τις επεξεργασμένες πληροφορίες στον χρήστη.
Σημείωση έκδοσης: Το AngularJS 1.x αποχώρησε από τη Μακροπρόθεσμη Υποστήριξη στις 31 Δεκεμβρίου 2021 και η ομάδα του framework επιβεβαιώνει ότι Η υποστήριξη του AngularJS έληξε επίσημα τον Ιανουάριο του 2022, επομένως δεν ακολουθούν εκδόσεις ή ενημερώσεις ασφαλείας. Κάθε βήμα και μπλοκ κώδικα παρακάτω διατηρείται ακριβώς όπως είναι γραμμένο, ως ιστορική αναφορά. Η νέα εργασία ανήκει στο σύγχρονο Angular, το οποίο εκφράζει την ίδια ιδέα με (ngSubmit) συνδεδεμένο με μια Ομάδα Φόρμας.
Πώς να υποβάλετε μια φόρμα στο AngularJS χρησιμοποιώντας το ng-submit
Οι διαδικασίες υποβολής πληροφοριών σε μια ιστοσελίδα συνήθως αντιμετωπίζονται από το συμβάν υποβολής στο πρόγραμμα περιήγησης Ιστού. Αυτό το συμβάν χρησιμοποιείται συνήθως για την αποστολή πληροφοριών που ο χρήστης ενδέχεται να έχει εισαγάγει σε μια ιστοσελίδα στον διακομιστή για περαιτέρω επεξεργασία, όπως διαπιστευτήρια σύνδεσης, δεδομένα φόρμας κ.λπ. Η υποβολή των πληροφοριών μπορεί να γίνει μέσω αιτήματος GET ή POST.
Ας πάρουμε ένα παράδειγμα υποβολής φόρμας Angular για να δούμε πώς μπορείτε να υποβάλετε φόρμες στο AngularJS.
Στο παράδειγμα υποβολής της φόρμας AngularJS, θα παρουσιάσουμε ένα πλαίσιο κειμένου στον χρήστη στο οποίο μπορεί να εισαγάγει το θέμα που θέλει να μάθει. Θα υπάρχει ένα κουμπί υποβολής στη σελίδα, το οποίο όταν πατηθεί θα προσθέσει το θέμα σε μια μη ταξινομημένη λίστα.
Η παρακάτω εικόνα tracπου ρέουν, από το θέμα που πληκτρολογείται στο πλαίσιο κειμένου, μέσω του κουμπιού "Υποβολή" και στο στοιχείο λίστας που προσαρτάται από κάτω.
Παράδειγμα υποβολής φόρμας AngularJS
Τώρα, θα δούμε ένα παράδειγμα υποβολής φόρμας AngularJS από τον Ελεγκτή χρησιμοποιώντας την οδηγία ng-submit:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code Επεξήγηση:
- Αρχικά δηλώνουμε την ετικέτα HTML της φόρμας μας, η οποία θα περιέχει τα στοιχεία ελέγχου "text box" και "submit button", όπως φαίνεται στο παράδειγμα συμβάντος υποβολής φόρμας Angular. Στη συνέχεια, χρησιμοποιούμε την οδηγία ng-submit AngularJS για να συνδέσουμε τη συνάρτηση "Display()" στη φόρμα μας. Αυτή η συνάρτηση θα οριστεί στον ελεγκτή μας και θα κληθεί κατά την υποβολή της φόρμας.
- Έχουμε ένα στοιχείο ελέγχου κειμένου στο οποίο ο χρήστης θα εισάγει το Θέμα που θέλει να μάθει. Αυτό θα δεσμευτεί σε μια μεταβλητή που ονομάζεται "Θέμα" που θα χρησιμοποιηθεί στον ελεγκτή μας.
- Υπάρχει το κανονικό κουμπί υποβολής στο AngularJS στο οποίο θα κάνει κλικ ο χρήστης όταν εισάγει το θέμα που θέλει.
- Χρησιμοποιήσαμε το ng-επανάληψη οδηγία για την εμφάνιση στοιχείων λίστας των θεμάτων που εισάγει ο χρήστης. Η οδηγία ng-repeat περνά από κάθε θέμα στον πίνακα "AllTopic" και εμφανίζει το όνομα του θέματος ανάλογα.
- Στον ελεγκτή μας, δηλώνουμε μια μεταβλητή πίνακα που ονομάζεται 'AllTopic'. Αυτή θα χρησιμοποιηθεί για να περιέχει όλα τα θέματα που εισήγαγε ο χρήστης στο Βήμα 2.
- Καθορίζουμε τον κώδικα για τη συνάρτηση Display() που θα καλείται κάθε φορά που ο χρήστης κάνει κλικ στο κουμπί Υποβολή. Εδώ χρησιμοποιούμε τη συνάρτηση πίνακα ώθησης για να προσθέσουμε τα Θέματα που εισάγει ο χρήστης μέσω της μεταβλητής 'Θέμα' στον πίνακα μας 'AllTopic'.
Εάν ο κώδικας του παραδείγματος φόρμας AngularJS εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη Έξοδος όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Για να δείτε τον κώδικα να λειτουργεί, πρώτα εισαγάγετε ένα όνομα θέματος όπως "Angular" όπως φαίνεται παραπάνω στο πλαίσιο κειμένου και, στη συνέχεια, κάντε κλικ στο κουμπί Υποβολή.
- Αφού κάνετε κλικ στο κουμπί υποβολής, θα δείτε το στοιχείο που εισήχθη στο πλαίσιο κειμένου προστέθηκε στη λίστα των στοιχείων.
- Αυτό επιτυγχάνεται με τη συνάρτηση Display(), η οποία καλείται όταν πατηθεί το κουμπί υποβολής.
- Η συνάρτηση Display() προσθέτει το κείμενο στη μεταβλητή του πίνακα που ονομάζεται "AllTopic". Και η οδηγία ng-repeat περνά από κάθε τιμή στη μεταβλητή του πίνακα 'AllTopic' και τις εμφανίζει ως στοιχεία λίστας ανάλογα.
ng-submit vs ng-click: Ποιο να χρησιμοποιήσετε
Και τα δύο Οδηγίες AngularJS μπορούν να καλέσουν την ίδια συνάρτηση ελεγκτή, ωστόσο ακούν διαφορετικά συμβάντα του προγράμματος περιήγησης. ng-submit κάθεται στο <form> και αντιδρά στο συμβάν υποβολής, επομένως ενεργοποιείται επίσης όταν ένας χρήστης πατήσει Enter μέσα σε ένα πεδίο. ng-click κάθεται σε ένα κουμπί και αντιδρά μόνο σε ένα κλικ του ποντικιού ή σε μια ισοδύναμη ενεργοποίηση.
| Άποψη | ng-υποβολή | ng-κλικ |
|---|---|---|
| Στοιχείο κεντρικού υπολογιστή | Η ετικέτα φόρμας | Οποιοδήποτε στοιχείο με δυνατότητα κλικ |
| Ακούστηκε το συμβάν | υποβολή, συμπεριλαμβανομένου του πλήκτρου Enter | μόνο κλικ |
| Προεπιλεγμένο πρόγραμμα περιήγησης POST | Καταστέλλεται από την οδηγία | Εξακολουθεί να ενεργοποιείται από ένα κουμπί υποβολής |
| Πρόσβαση στην κατάσταση της φόρμας | Διαβάζει τα $valid και $invalid στον ελεγκτή φόρμας | Δεν υπάρχει δικό του μορφολογικό πλαίσιο |
| Φυσική εφαρμογή | Παράδοση δεδομένων φόρμας σε έναν ελεγκτή | Κουμπιά γραμμής εργαλείων, σύνδεσμοι, ενεργοποιητές τρόπου λειτουργίας |
Η υποστήριξη πληκτρολογίου συνήθως καθορίζει την επιλογή. Μια φόρμα συνδεδεμένη με ng-click αγνοεί το πλήκτρο Enter, κάτι που αποθαρρύνει τους χρήστες που συμπληρώνουν ένα πλαίσιο σύνδεσης. Κράτηση ng-click για ενέργειες που δεν αποτελούν υποβολές φόρμας, όπως η εκκαθάριση ενός πεδίου ή το άνοιγμα ενός παραθύρου διαλόγου.
Γιατί το ng-submit αποτρέπει την προεπιλεγμένη υποβολή από το πρόγραμμα περιήγησης
Μια απλή φόρμα HTML αντιδρά σε ένα συμβάν υποβολής σειριοποιώντας τα πεδία της και ζητώντας από το πρόγραμμα περιήγησης να φορτώσει μια νέα σελίδα, η οποία απορρίπτει κάθε τιμή που διατηρείται στο $scope. ο ng-submit η οδηγία το εμποδίζει να συμβεί αυτό: καλεί preventDefault() για εσάς, έτσι ώστε η έκφραση να εκτελείται και η τρέχουσα σελίδα να παραμένει στη θέση της. Όχι $event απαιτείται όρισμα και δεν απαιτείται χειροκίνητη κλήση.
Η καταστολή έχει μία τεκμηριωμένη προϋπόθεση. Σύμφωνα με το Αναφορά ngSubmit, η προεπιλεγμένη ενέργεια αποτρέπεται μόνο όταν η φόρμα δεν φέρει action, data-action or x-action ιδιότητα. Προσθέστε οποιοδήποτε από αυτά και το πρόγραμμα περιήγησης θα πλοηγηθεί όπως συνήθως μετά την ολοκλήρωση του χειριστή, η οποία είναι η σωστή συμπεριφορά για μια προοδευτικά βελτιωμένη φόρμα που αποδίδεται από τον διακομιστή και αποτελεί έκπληξη παντού αλλού.
Επειδή η οδηγία καταπίνει το αντικείμενο συμβάντος, διαβάστε τις τιμές που υποβλήθηκαν από τις ιδιότητες που ng-μοντέλο έγραψαν στο πεδίο εφαρμογής ή τα πέρασαν ρητά, όπως στο ng-submit="Display(Topic)".
Πώς να επικυρώσετε μια φόρμα πριν από την εκτέλεση του ng-submit
Το παραπάνω παράδειγμα δέχεται ένα κενό θέμα, επειδή τίποτα δεν ελέγχει πρώτα το πλαίσιο κειμένου. Το AngularJS δημιουργεί έναν ελεγκτή φόρμας για κάθε ονομασμένη φόρμα και αυτός ο ελεγκτής εκθέτει τις σημαίες που απαιτούνται για την πύλη υποβολής. Προσθήκη novalidate έτσι ώστε το πρόγραμμα περιήγησης να αφήνει τις δικές του φυσαλίδες HTML5 απενεργοποιημένες και το AngularJS επικύρωση φόρμας αναλαμβάνει.
- Δώστε στη φόρμα ένα
nameΤο AngularJS δημοσιεύει έναν ελεγκτή με αυτό το όνομα στον περιβάλλοντα χώρο. ελεγκτής πεδίο εφαρμογής. - Πρόσθεση
novalidateστην ετικέτα φόρμας, ώστε η εγγενής επικύρωση του προγράμματος περιήγησης να μην παρεμβαίνει. - Σημειώστε τα πεδία χρησιμοποιώντας
required,ng-minlength,ng-maxlengthorng-pattern. - Φύλαξε τον χειριστή με
$validκαι περάστε τον ελεγκτή φόρμας, ώστε η συνάρτηση να μπορεί να ελέγξει μεμονωμένα πεδία. - Απενεργοποιήστε το κουμπί με
ng-disabledδείχνοντας προς$invalid, το οποίο παρέχει άμεση οπτική ανατροφοδότηση.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
Δύο λάθη ευθύνονται για τα περισσότερα αναφερόμενα προβλήματα με αυτό το μοτίβο:
- Double υποβολή. Δεσμευτικός
ng-clickστο κουμπί υποβολής ενώng-submitκάθεται στη φόρμα και εκτελεί τον χειριστή δύο φορές, μία φορά ανά συμβάν. Η επίσημη αναφορά προειδοποιεί κατά του συνδυασμού των δύο χειριστών, οπότε επιλέξτε έναν. - Απροσδόκητες υποβολές. Οποιοδήποτε κουμπί μέσα σε μια φόρμα χωρίς
type="button"εγείρει το συμβάν υποβολής. Επισημαίνει ρητά τα κουμπιά ακύρωσης και επαναφοράς, διαφορετικά ενεργοποιούν και τον χειριστή.
Φύλαξη σε λειτουργία $valid είναι μια διευκόλυνση, όχι ένας έλεγχος ασφαλείας. Οι τιμές πρέπει να επικυρωθούν εκ νέου στον διακομιστή πριν αποθηκευτούν.
