Οδηγίες formulάριου AngularJS

Ορισμός και χρήση

Μετατροπή AngularJS <form> Η προεπιλεγμένη συμπεριφορά του στοιχείου.

Τα formulάρια των εφαρμογών AngularJS έχουν ορισμένες ιδιότητες. Αυτές οι ιδιότητες περιγράφουν την τρέχουσα κατάσταση του formulάριου.

Το formulάριο έχει τις εξής καταστάσεις:

• $pristine Δεν έχει τροποποιηθεί κανένα πεδίο
• $dirty Ένα ή περισσότερα πεδία έχουν τροποποιηθεί
• $invalid Το περιεχόμενο της φόρμας είναι μη έγκυρο
• $valid Το περιεχόμενο της φόρμας είναι έγκυρο
• $subscribed Το formulάριο έχει υποβληθεί

Η τιμή κάθε κατάστασης αντιπροσωπεύει μια boolean αξία, για true ή false.

Αν δεν καθοριστεί η ιδιότητα action, το formulάριο του AngularJS θα αποτρέψει την προεπιλεγμένη λειτουργία, δηλαδή την υποβολή του formulάριου στο server.

Παράδειγμα

Παράδειγμα 1

Όσο το απαιτούμενο πεδίο εισαγωγής είναι κενό, η κατάσταση του formulάριου "true" δεν θεωρείται:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Η κατάσταση του formulάριου είναι:</p>
<h1>{{myForm.$valid}}</h1>

Δοκιμάστε προσωπικά

Παράδειγμα 2

Ανάπτυξη στυλ σε μη τροποποιημένα (οριζόμενα) και τροποποιημένα formulα

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Δοκιμάστε προσωπικά

Γραμματική

<form name="formname</form>

με τη χρήση name τιμές για να αναφέρετε τη φόρμα.

Κλάσεις CSS

Η φόρμα του AngularJS εφαρμογής έχει δοθεί με ορισμένες κλάσεις. Αυτές οι κλάσεις μπορούν να χρησιμοποιηθούν για να καθορίσουν το στυλ της φόρμας ανάλογα με την κατάσταση της.

Προστέθηκαν οι παρακάτω κλάσεις:

• ng-pristine Δεν υπάρχει πεδίο που δεν έχει τροποποιηθεί
• ng-dirty Ένα ή περισσότερα πεδία έχουν τροποποιηθεί
• ng-valid Το περιεχόμενο της φόρμας είναι έγκυρο
• ng-invalid Το περιεχόμενο της φόρμας είναι μη έγκυρο
• ng-valid-key Έλεγχος μιας κλειδιάς κάθε φορά. Παράδειγμα:ng-valid-requiredείναι πολύ χρήσιμο όταν πρέπει να ελεγχθούν περισσότερες από μια επιλογές.
• ng-invalid-key Παράδειγμα:ng-invalid-required

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