Επικύρωση φόρμας AngularJS κατά την υποβολή: $dirty, $valid & $invalid

⚡ Έξυπνη Σύνοψη

Η Επικύρωση Φόρμας στο AngularJS ελέγχει ότι τα δεδομένα που εισάγονται σε μια φόρμα είναι σωστά και πλήρη πριν φτάσουν στον διακομιστή. Καλύπτονται τέσσερις προσεγγίσεις εδώ, από απλά χαρακτηριστικά HTML5 μέσω ιδιοτήτων πεδίου εφαρμογής έως αυτόματες μονάδες επικύρωσης.

🧩 Χαρακτηριστικά HTML5: Το απαιτούμενο χαρακτηριστικό και οι τύποι εισαγωγής email, κωδικού πρόσβασης και αριθμού παρέχουν ελέγχους εγγενείς στο πρόγραμμα περιήγησης χωρίς δέσμες ενεργειών.
🔍 Κρατικά Ακίνητα: Το AngularJS εκθέτει τα $dirty, $pristine, $valid και $invalid σε κάθε επώνυμο στοιχείο ελέγχου μέσα σε μια επώνυμη φόρμα.
🏷️ Απαίτηση ονομασίας: Τόσο η φόρμα όσο και κάθε στοιχείο ελέγχου χρειάζονται ένα χαρακτηριστικό name, επειδή η κατάσταση επικύρωσης αντιμετωπίζεται ως formName.controlName.
🚫 Καταστολή εγγενών αναδυόμενων παραθύρων: Η προσθήκη της συνάρτησης novalidate στη φόρμα εμποδίζει το πρόγραμμα περιήγησης να παρεμποδίσει την υποβολή, ώστε το AngularJS να μπορεί να την χειριστεί.
💬 Εμφάνιση μηνυμάτων: Η ενότητα ngMessages αντικαθιστά τις στοιβαγμένες οδηγίες ng-show και εμφανίζει ένα σφάλμα κάθε φορά με σειρά προτεραιότητας.
⚙️ Αυτόματη επικύρωση: Η ενότητα jcs-autoValidate δημιουργεί μηνύματα σφάλματος για κάθε στοιχείο ελέγχου χωρίς καμία προσαρμοσμένη σήμανση.
🔘 Σχόλια υποβολής: Ένα κουμπί Ladda εφαρμόζει έναν περιστρεφόμενο διακόπτη ενώ μια υποβολή βρίσκεται σε εξέλιξη, σηματοδοτώντας την πρόοδο στον χρήστη.

Περισσότερα

Επικύρωση φόρμας στο AngularJS

Επικύρωση φόρμας Στο AngularJS, η διαδικασία επαλήθευσης της ορθότητας και της πληρότητας των δεδομένων που εισάγονται σε μια φόρμα είναι απαραίτητη. Όταν ένας χρήστης υποβάλλει τη φόρμα, πραγματοποιείται πρώτα η επικύρωση, προτού αποσταλούν οι λεπτομέρειες στον διακομιστή. Η διαδικασία επικύρωσης διασφαλίζει, στον καλύτερο δυνατό βαθμό, ότι τα πεδία εισαγωγής έχουν συμπληρωθεί με τον σωστό τρόπο.

Σε ένα παράδειγμα από τον πραγματικό κόσμο, ας υποθέσουμε ότι πρόκειται για έναν ιστότοπο που απαιτεί τη συμπλήρωση μιας φόρμας εγγραφής πριν από την παροχή πλήρους πρόσβασης. Η σελίδα εγγραφής θα έχει πεδία εισαγωγής για όνομα χρήστη, κωδικό πρόσβασης, email και ούτω καθεξής.

Για παράδειγμα, το αναγνωριστικό email πρέπει πάντα να έχει τη μορφή username@site.domainΕάν κάποιος εισαγάγει μόνο το όνομα χρήστη, η επικύρωση θα πρέπει να αποτύχει. Η επικύρωση εκτελεί αυτούς τους βασικούς ελέγχους πριν από την αποστολή των στοιχείων στον διακομιστή για περαιτέρω επεξεργασία.

⚠️ Σημείωση έκδοσης: Το AngularJS (ο κλάδος 1.x) έφτασε στο τέλος του κύκλου ζωής του στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις ασφαλείας. Οι παρακάτω τεχνικές παραμένουν σωστές για παλαιότερες εφαρμογές. Το σύγχρονο Angular χειρίζεται την ίδια εργασία με φόρμες που βασίζονται σε πρότυπα ή με αντιδραστικές φόρμες.

Επικύρωση φόρμας με χρήση HTML5

Η επικύρωση φόρμας είναι η διαδικασία προεπικύρωσης των πληροφοριών που εισάγονται σε μια διαδικτυακή φόρμα πριν από την αποστολή της στον διακομιστή. Η επικύρωση από την πλευρά του πελάτη είναι προτιμότερη, επειδή προσθέτει πολύ λιγότερη επιβάρυνση από την επανυποβολή της φόρμας μετά από μια διαδρομή μετ' επιστροφής.

Το παρακάτω παράδειγμα δείχνει μια απλή φόρμα εγγραφής στην οποία ο χρήστης εισάγει ένα όνομα χρήστη, έναν κωδικό πρόσβασης, ένα email και μια ηλικία. Η φόρμα διαθέτει ελέγχους επικύρωσης που διασφαλίζουν ότι οι πληροφορίες έχουν εισαχθεί σωστά.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Διορθώσεις εφαρμόστηκαν σε κάθε καταχώριση σε αυτήν τη σελίδα. Τα πρωτότυπα δήλωσαν chrset="UTF 8", το οποίο δεν είναι ούτε έγκυρο χαρακτηριστικό ούτε έγκυρη κωδικοποίηση, και φόρτωσε το AngularJS τρεις φορές — angular-route.js πρώτον, το οποίο δημιουργεί σφάλμα επειδή η ενότητα δρομολόγησης εγγράφεται σε ένα πλαίσιο που δεν έχει φορτωθεί, έπειτα angular.min.js και angular.js, την ίδια βιβλιοθήκη δύο φορές. Τράβηξαν επίσης bootstrap.css μέσω μιας <script> ετικέτα, επομένως δεν εφαρμόστηκε ποτέ στυλ. Κάθε καταχώριση φορτώνει πλέον μία βιβλιοθήκη, έκδοση 1.8.3, και συνδέει σωστά το φύλλο στυλ. Η συμπλήρωση διάταξης δημιουργήθηκε από επαναλαμβανόμενες   οντότητες έχουν αφαιρεθεί.

Code εξήγηση

Για τον τύπο εισαγωγής κειμένου, το required Το χαρακτηριστικό σημαίνει ότι το πλαίσιο κειμένου δεν μπορεί να είναι κενό κατά την υποβολή της φόρμας.
Ο επόμενος τύπος εισαγωγής είναι ο κωδικός πρόσβασης. Επειδή ο τύπος έχει επισημανθεί ως κωδικός πρόσβασης, το κείμενο που εισάγεται στο πεδίο καλύπτεται από μάσκα.
Επειδή ο τύπος εισόδου έχει καθοριστεί ως email, το κείμενο στο πλαίσιο πρέπει να ταιριάζει με το μοτίβο name@site.domain.
Όταν ο τύπος εισόδου έχει επισημανθεί ως αριθμός, οι χαρακτήρες που πληκτρολογούνται από το πληκτρολόγιο απλώς δεν γίνονται δεκτοί από το πεδίο.

Παραγωγή

Για να δείτε την επικύρωση σε δράση, κάντε κλικ στην επιλογή Υποβολή χωρίς να εισαγάγετε τίποτα.

Εμφανίζεται ένα αναδυόμενο παράθυρο που αναφέρει ότι το πεδίο πρέπει να συμπληρωθεί, επομένως το στοιχείο ελέγχου που έχει επισημανθεί ως απαιτούμενο αποκλείει την υποβολή όταν παραμείνει κενό.

Η εισαγωγή μιας τιμής στον έλεγχο κωδικού πρόσβασης εμφανίζει το σύμβολο '*' που καλύπτει τους χαρακτήρες.

Αν εισαγάγετε ένα λανθασμένο αναγνωριστικό email και κάνετε κλικ στην επιλογή Υποβολή, εμφανίζεται ένα αναδυόμενο παράθυρο που ζητά το σύμβολο @. Τέλος, οι χαρακτήρες που πληκτρολογείτε στο στοιχείο ελέγχου ηλικίας δεν εμφανίζονται ποτέ, επειδή το πεδίο δέχεται μόνο αριθμούς.

Τα αναδυόμενα παράθυρα του προγράμματος περιήγησης ρυθμίζονται γρήγορα, αλλά η διατύπωση και το στυλ τους δεν μπορούν να αλλάξουν. Εκεί αναλαμβάνουν οι ιδιότητες επικύρωσης του AngularJS.

Επικύρωση φόρμας χρησιμοποιώντας $dirty, $valid, $invalid, $pristine

AngularJS παρέχει τις δικές του ιδιότητες για επικύρωση. Οι ακόλουθες ιδιότητες εκτίθενται σε κάθε επώνυμο στοιχείο ελέγχου:

$βρώμικο – Ο χρήστης έχει αλληλεπιδράσει με το στοιχείο ελέγχου
$έγκυρο – Το περιεχόμενο του πεδίου είναι έγκυρο
$invalid – Το περιεχόμενο του πεδίου δεν είναι έγκυρο
$παρθένα – Ο χρήστης δεν έχει αλληλεπιδράσει ακόμη με το στοιχείο ελέγχου

Παρακάτω παρατίθενται τα βήματα για την εκτέλεση της επικύρωσης AngularJS.

Βήμα 1) Χρησιμοποιήστε το novalidate ιδιότητα κατά τη δήλωση της φόρμας. Αυτό ενημερώνει το πρόγραμμα περιήγησης ότι η επικύρωση θα γίνει από το AngularJS.

Βήμα 2) Βεβαιωθείτε ότι η φόρμα έχει ορίσει ένα όνομα, επειδή αυτό το όνομα χρησιμοποιείται για την επίτευξη της κατάστασης επικύρωσης.

Βήμα 3) Βεβαιωθείτε ότι κάθε χειριστήριο διαθέτει επίσης ένα name χαρακτηριστικό, για τον ίδιο λόγο. Ένα στοιχείο ελέγχου χωρίς όνομα δεν καταχωρείται ποτέ στη φόρμα.

Βήμα 4) Χρησιμοποιήστε το ng-show οδηγία για τον έλεγχο των ιδιοτήτων $dirty, $invalid και $valid.

Το παρακάτω παράδειγμα έχει ένα μόνο πεδίο κειμένου στο οποίο ο χρήστης εισάγει ένα όνομα θέματος. Εάν αφεθεί κενό, ενεργοποιείται ένα σφάλμα επικύρωσης και εμφανίζεται το μήνυμα.

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Διορθώθηκαν δύο λογικά λάθη. Το πρωτότυπο απενεργοποίησε το κουμπί με ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Επειδή $dirty είναι ψευδές μέχρι ο χρήστης να αγγίξει το πεδίο, το κουμπί παρέμεινε πατημένο ενεργοποιημένη σε μια ανέγγιχτη κενή φόρμα, την ακριβή περίπτωση που έπρεπε να μπλοκάρει· myForm.$invalid καλύπτει και τα δύο. Το πρωτότυπο περιλάμβανε επίσης την προεπιλεγμένη τιμή $scope.Display = function () { $scope.user = 'Angular'; }, μια συνάρτηση που δεν κλήθηκε ποτέ, επομένως το πλαίσιο κειμένου άνοιξε κενό παρά το κείμενο που ισχυριζόταν ότι έδειχνε "AngularJS". Η ανάθεση γίνεται τώρα απευθείας, με την τιμή που αναφέρει το περιβάλλον κείμενο.

Code εξήγηση

Η φόρμα ονομάζεται «myForm». Αυτό απαιτείται για την επικύρωση των στοιχείων ελέγχου της.
The novalidate Η ιδιότητα σταματά την επικύρωση του προγράμματος περιήγησης, επομένως το AngularJS μπορεί να το κάνει αντ' αυτού.
Η οδηγία ng-show ελέγχει τις ιδιότητες "$dirty" και "$invalid". Εάν το πλαίσιο κειμένου έχει τροποποιηθεί, η τιμή $dirty είναι true. Εάν η τιμή του είναι κενή, η τιμή $invalid είναι true. Όταν και οι δύο είναι true, εμφανίζεται το span με το κόκκινο κείμενο.
Ο ένθετος έλεγχος διαβάζει την ιδιότητα "$error.required", η οποία ισχύει κάθε φορά που ένα απαιτούμενο στοιχείο ελέγχου δεν έχει τιμή, και εμφανίζει την ένδειξη "Απαιτείται όνομα χρήστη".
Το κουμπί υποβολής είναι απενεργοποιημένο μέσω ng-disabled κάθε φορά που η φόρμα στο σύνολό της είναι άκυρη.
Ο ελεγκτής ορίζει την αρχική τιμή του πλαισίου κειμένου σε "AngularJS", επομένως η φόρμα ανοίγει σε έγκυρη κατάσταση και η επικύρωση είναι πιο εύκολο να παρατηρηθεί καθώς το κείμενο διαγράφεται.

Παραγωγή

Όταν η φόρμα εμφανίζεται για πρώτη φορά, το πλαίσιο κειμένου εμφανίζει την ένδειξη "AngularJS" και το κουμπί υποβολής είναι ενεργοποιημένο. Μόλις αφαιρεθεί το κείμενο, εμφανίζεται το μήνυμα σφάλματος και το κουμπί απενεργοποιείται.

Το παραπάνω στιγμιότυπο οθόνης δείχνει δύο πράγματα:

Το κουμπί υποβολής είναι απενεργοποιημένο
Δεν υπάρχει όνομα θέματος στο πλαίσιο κειμένου Θέμα, επομένως εμφανίζεται το μήνυμα σφάλματος "Απαιτείται όνομα χρήστη".

Πώς να εμφανίσετε σφάλματα επικύρωσης με το ngMessages

Το παραπάνω μοτίβο λειτουργεί, αλλά δεν κλιμακώνεται. Ένα πεδίο με τέσσερις περιορισμούς χρειάζεται τέσσερις ενσωματωμένους ng-show εκτείνεται, και όταν πολλά από αυτά αποτυγχάνουν ταυτόχρονα, κάθε μήνυμα εμφανίζεται μαζί. ngMessages Η ενότητα, που αποστέλλεται ξεχωριστά από την ομάδα AngularJS, λύνει και τα δύο προβλήματα: εμφανίζει ένα μήνυμα κάθε φορά, με τη σειρά που γράφονται τα μηνύματα.

Φορτώστε την ενότητα και προσθέστε την ως εξάρτηση.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

Η σήμανση διαβάζεται στη συνέχεια ως μια λίστα κανόνων και όχι ως μια στοίβα συνθηκών.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Τρεις λεπτομέρειες κάνουν αυτό να λειτουργεί καλά στην πράξη. Το ng-messages σημεία χαρακτηριστικών στο στοιχείο ελέγχου $error αντικείμενο αντί για μια λογική τιμή, επομένως δεν χρειάζεται να επαναληφθεί καμία συνθήκη. Μόνο η πρώτη αντιστοίχιση ng-message αποδίδει, που σημαίνει ότι ένα κενό πεδίο αναφέρει ότι απαιτείται αντί να παραπονιέται επίσης για το μήκος του. Προσθήκη ng-messages-multiple αντιστρέφει αυτή τη συμπεριφορά όταν κάθε αποτυχία πρέπει πραγματικά να καταγράφεται.

Τυλίξτεping το μπλοκ μέσα ng-if="myForm.user.$dirty" διατηρεί τη φόρμα σιωπηλή μέχρι ο χρήστης να πληκτρολογήσει κάτι. Η αντικατάσταση $touched για $dirty καθυστερεί περαιτέρω το μήνυμα, μέχρι η εστίαση να φύγει από το πεδίο, κάτι που συνήθως είναι η πιο φιλική επιλογή σε μια μεγάλη φόρμα εγγραφής.

Μια προειδοποίηση: ngMessages αποστέλλεται ως ξεχωριστό αρχείο, επομένως η παράλειψη της ετικέτας script ή της εξάρτησης της ενότητας αφήνει το μπλοκ να μην αποδίδει τίποτα απολύτως, χωρίς σφάλμα κονσόλας για να το εξηγήσει.

Η χειρόγραφη σύνταξη μηνυμάτων είναι ακριβής αλλά επαναλαμβανόμενη. Η επόμενη ενότητα καλύπτει μια ενότητα που τα δημιουργεί αυτόματα.

Επικύρωση φόρμας χρησιμοποιώντας AngularJS Auto Validate

Το AngularJS μπορεί να επικυρώσει όλα τα στοιχεία ελέγχου σε μια φόρμα αυτόματα, χωρίς προσαρμοσμένο κώδικα για την επικύρωση ή τα μηνύματα σφάλματος. Αυτό γίνεται συμπεριλαμβάνοντας μια ενότητα κοινότητας που ονομάζεται "jcs-autoValidate".

Με αυτήν την ενότητα στη θέση της, δεν απαιτείται ειδικός κώδικας για την εκτέλεση της επικύρωσης ή την εμφάνιση των μηνυμάτων. Όλα τα στοιχεία διαχειρίζονται μέσα στο jcs-autoValidate.

Το παρακάτω παράδειγμα έχει μια απλή φόρμα με ένα μόνο απαιτούμενο πλαίσιο κειμένου. Εμφανίζεται ένα μήνυμα σφάλματος εάν το στοιχείο ελέγχου δεν είναι συμπληρωμένο.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Διόρθωση: το πρωτότυπο προσδιόρισε τον έλεγχο με id="user" μόνο. Η συνάρτηση jcs-autoValidate φτάνει στο στοιχείο ελέγχου μέσω της φόρμας, επομένως ένα name Το χαρακτηριστικό είναι υποχρεωτικό και το μήνυμα δεν εμφανίστηκε ποτέ χωρίς αυτό. Το πρωτότυπο φόρτωσε επίσης δύο διαφορετικές εκδόσεις AngularJS, 1.6.4 από το Google CDN παράλληλα με την έκδοση 1.6.9 και δεν έχει συνδεθεί ποτέ Bootstrap παρόλο που το παράδειγμα εξαρτάται από το form-group και form-control κλάσεις για να τοποθετήσουν το κείμενο σφάλματος.

💡 Σημείωση: Το jcs-autoValidate είναι ένα έργο κοινότητας και δεν συντηρείται πλέον ενεργά. Παραμένει χρησιμοποιήσιμο σε υπάρχουσες εφαρμογές AngularJS, αλλά το ενσωματωμένο ngMessages Η προσέγγιση που παρουσιάστηκε νωρίτερα είναι η ασφαλέστερη επιλογή για οτιδήποτε νέο.

Code εξήγηση

Περιλαμβάνεται το σενάριο «jcs-auto-validate.js», το οποίο περιέχει όλες τις λειτουργίες αυτόματης επικύρωσης.
Κάθε στοιχείο ελέγχου και το div που το περιβάλλει τοποθετούνται μέσα σε μια κλάση "form-group", όπου η ενότητα εισάγει το μήνυμά της.
Ο έλεγχος φέρει τόσο ένα αναγνωριστικό όσο και ένα nameκαι Bootstrap προμηθεύει το form-control στυλ.
Η ενότητα "jcs-autoValidate" παρατίθεται ως εξάρτηση της ενότητας AngularJS.

Παραγωγή

Από προεπιλογή, η φόρμα αποδίδεται ακριβώς όπως έχει γραφτεί.

Η υποβολή της κενής φόρμας εμφανίζει το μήνυμα «Αυτό το πεδίο είναι υποχρεωτικό», το οποίο δημιουργείται εξ ολοκλήρου από το jcs-autoValidate. Μόλις επικυρωθεί η φόρμα, το ερώτημα που απομένει είναι τι βλέπει ο χρήστης κατά την αποστολή της.

Σχόλια χρηστών με κουμπιά Ladda

Τα κουμπιά «Ladda» είναι ένα πλαίσιο που χτίζεται πάνω σε JavaΓραφή που δίνει στα κουμπιά ένα οπτικό εφέ όταν πατιούνται.

Εάν σε ένα κουμπί δοθεί η ιδιότητα "ladda" και πατηθεί, εμφανίζεται ένα εφέ περιστροφής. Διατίθενται διαφορετικά στυλ δεδομένων για πρόσθετα οπτικά εφέ.

Το παρακάτω παράδειγμα δείχνει μια απλή φόρμα με κουμπί υποβολής. Όταν πατηθεί το κουμπί, εμφανίζεται ένα εφέ περιστροφής.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Διόρθωση: το αρχικό φορτωμένο angular-ladda.js και angular-ladda.min.js μαζί, το οποίο καταχωρεί την ίδια ενότητα δύο φορές, και πάλι τράβηξε δύο εκδόσεις AngularJS. Επίσης, ανέφερε jcs-autoValidate ως εξάρτηση που αυτό το παράδειγμα δεν χρησιμοποιεί ποτέ. Ένα αντίγραφο κάθε βιβλιοθήκης φορτώνεται εδώ.

Code εξήγηση

Ο "ng-υποβολήΗ οδηγία "" καλεί μια συνάρτηση με όνομα "submit", η οποία αλλάζει το χαρακτηριστικό ladda του κουμπιού.
Το χαρακτηριστικό ladda ανήκει στο πλαίσιο Ladda και είναι αυτό που προσθέτει το εφέ περιστροφής. Η τιμή του είναι συνδεδεμένη με το submitting μεταβλητός.
Η ιδιότητα data-style είναι ένα άλλο χαρακτηριστικό Ladda που επιλέγει ένα διαφορετικό οπτικό εφέ.
Η ενότητα 'angular-ladda' πρέπει να προστεθεί στην εφαρμογή AngularJS για να λειτουργήσει το framework.
The submitting Η μεταβλητή αρχικοποιείται σε false, επομένως το κουμπί ξεκινά χωρίς το εφέ περιστροφής.
Τα σύνολα συναρτήσεων υποβολής submitting σε true, το οποίο εφαρμόζει το εφέ. Σε μια πραγματική εφαρμογή, θα επανερχόταν σε false μόλις ο διακομιστής ανταποκριθεί, διαφορετικά το κουμπί περιστρέφεται επ' αόριστον.

Παραγωγή

Όταν η φόρμα εμφανίζεται για πρώτη φορά, το κουμπί υποβολής εμφανίζεται στην απλή του μορφή.

Όταν πατηθεί το κουμπί, το submitting Η μεταβλητή έχει οριστεί σε true. Αυτή η τιμή φτάνει στο χαρακτηριστικό "ladda" του κουμπιού, παράγοντας το εφέ περιστροφής.

Συχνές Ερωτήσεις

Η τιμή $dirty γίνεται true όταν αλλάζει η τιμή. Η τιμή $touched γίνεται true όταν το πεδίο χάσει την εστίαση. Χρησιμοποιήστε την τιμή $touched για να καθυστερήσετε ένα σφάλμα μέχρι ο χρήστης να προχωρήσει, κάτι που δίνει λιγότερο έντονη αίσθηση ενώ το typing.

Προσθέστε την οδηγία ng-pattern με μια κανονική έκφραση, για παράδειγμα ng-pattern=”/^[0-9]{6}$/”. Η αποτυχία εμφανίζεται στη συνέχεια ως $error.pattern, την οποία το ngMessages μπορεί να αναφέρει όπως οποιοσδήποτε ενσωματωμένος περιορισμός.

Ναι. Τα εργαλεία τεχνητής νοημοσύνης διαβάζουν την μορφοποίηση και παράγουν τα απαιτούμενα αντίστοιχα μπλοκ, ng-pattern και ngMessages. Ελέγχετε πάντα τις κανονικές εκφράσεις, καθώς τα δημιουργημένα μοτίβα email και τηλεφώνου συχνά απορρίπτουν έγκυρα δεδομένα εισόδου.

Οι βοηθοί τεχνητής νοημοσύνης ελέγχουν γρήγορα τις τρεις συνήθεις αιτίες: ένα χαρακτηριστικό name που λείπει στη φόρμα ή το στοιχείο ελέγχου, ένα μοντέλο ng που λείπει και η συνάρτηση novalidate απενεργοποιημένη, ώστε το πρόγραμμα περιήγησης να αναχαιτίζει πρώτα την υποβολή.

Όχι. Βελτιώνει την εμπειρία και μειώνει τα δρομολόγια μετ' επιστροφής, αλλά ο καθένας μπορεί να το παρακάμψει με εργαλεία προγραμματιστών. Κάθε κανόνας που επιβάλλεται στο πρόγραμμα περιήγησης πρέπει να επιβληθεί ξανά στον διακομιστή.

Επικύρωση φόρμας AngularJS κατά την υποβολή: $dirty, $valid & $invalid

Επικύρωση φόρμας στο AngularJS

Επικύρωση φόρμας με χρήση HTML5

Code εξήγηση

Παραγωγή

Επικύρωση φόρμας χρησιμοποιώντας $dirty, $valid, $invalid, $pristine

Code εξήγηση

Παραγωγή

Πώς να εμφανίσετε σφάλματα επικύρωσης με το ngMessages

Επικύρωση φόρμας χρησιμοποιώντας AngularJS Auto Validate

Code εξήγηση

Παραγωγή

Σχόλια χρηστών με κουμπιά Ladda

Code εξήγηση

Παραγωγή

Συχνές Ερωτήσεις

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο

Επικύρωση φόρμας στο AngularJS

Επικύρωση φόρμας με χρήση HTML5

Code εξήγηση

Παραγωγή

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

Επικύρωση φόρμας χρησιμοποιώντας $dirty, $valid, $invalid, $pristine

Code εξήγηση

Παραγωγή

Πώς να εμφανίσετε σφάλματα επικύρωσης με το ngMessages

Επικύρωση φόρμας χρησιμοποιώντας AngularJS Auto Validate

Code εξήγηση

Παραγωγή

Σχόλια χρηστών με κουμπιά Ladda

Code εξήγηση

Παραγωγή

Συχνές Ερωτήσεις

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο