απαιτήσεις: Στην καθημερινή ανάπτυξη front-end, οι φόρμες χρησιμοποιούνται συχνά για την προσθήκη και επεξεργασία δεδομένων μέσω φορμών. Μια παρουσία μιας ομάδας φόρμας μπορεί να παρακολουθεί ένα σύνολο παρουσιών FormControl και όταν δημιουργείται μια ομάδα φόρμας, κάθε στοιχείο ελέγχου σε αυτήν μπορεί να παρακολουθείται με το όνομά του. Πώς μπορώ να προσαρμόσω ένα στοιχείο ελέγχου φόρμας;
Ας ρίξουμε μια ματιά πρώτα στις αποδόσεις:
Τα βήματα είναι τα εξής:
- Κληρονομεί τη διασύνδεση ControlValueAccessor
- Εγγραφείτε σε έναν πάροχο NG_VALUE_ACCESSOR
Κληρονομεί τη διασύνδεση ControlValueAccessor
Η διεπαφή ControlValueAccessor ορίζει 4 μεθόδους, ως εξής:
- writeValue: Οποιαδήποτε ενέργεια τιμής που καλεί ρητά το API FormControl θα καλέσει τη μέθοδο writeValue() του στοιχείου ελέγχου προσαρμοσμένης φόρμας και θα μεταβιβάσει τη νέα τιμή ως παράμετρο. Αυτό που κάνει είναι να ορίζει την τιμή του στοιχείου ελέγχου εγγενούς φόρμας. Η ροή δεδομένων προέρχεται από Γωνιακή φόρμα -> Εγγενής φόρμα (προσαρμοσμένο στοιχείο ελέγχου).
- registerOnChange: καταχωρεί το συμβάν onChange, το οποίο καλείται κατά την προετοιμασία και είναι μια συνάρτηση ενεργοποίησης συμβάντος. Ποια είναι η χρήση αυτής της συνάρτησης ενεργοποίησης συμβάντων; Πρέπει πρώτα να αποθηκεύσουμε τη συνάρτηση ενεργοποίησης συμβάντος στο registerOnChange και να την καλέσουμε όταν είναι η κατάλληλη στιγμή (για παράδειγμα, όταν το στοιχείο ελέγχου λαμβάνει είσοδο από τον χρήστη και πρέπει να απαντήσει). Μπορείτε να κατανοήσετε αυτή τη λειτουργία ως "ένα API που χρησιμοποιείται από τον καλούντα για να ειδοποιεί το στοιχείο ελέγχου όταν υπάρχει αλλαγή στα δεδομένα της φόρμας στο στοιχείο ελέγχου", δηλαδή για να συγχρονίσει τις πληροφορίες στο στοιχείο ελέγχου. Η παράμετρος αυτής της συνάρτησης συμβάντος είναι η τιμή που πρόκειται να λάβει η Γωνιακή φόρμα. Ροή δεδομένων από Εγγενής φόρμα (προσαρμοσμένο στοιχείο ελέγχου) -> Γωνιακή φόρμα.
- registerOnTouched: Καταχωρεί το συμβάν onTouched, το οποίο είναι μια συνάρτηση επανάκλησης που ενεργοποιείται όταν ένας χρήστης αλληλεπιδρά με ένα στοιχείο ελέγχου. Αυτή η συνάρτηση χρησιμοποιείται για να ειδοποιήσει το στοιχείο ελέγχου φόρμας ότι έχει ήδη αγγίξει για να ενημερώσει την εσωτερική κατάσταση του δεσμευμένου FormContorl. Ροή δεδομένων από Εγγενής φόρμα (προσαρμοσμένο στοιχείο ελέγχου) -> Γωνιακή φόρμα.
- setDisabledState: Όταν η κατάσταση φόρμας αλλάζει σε ή από DISABLED, το API φόρμας καλεί τη μέθοδο setDisabledState() για να ενεργοποιήσει ή να απενεργοποιήσει το αντίστοιχο στοιχείο DOM. Η ροή δεδομένων προέρχεται από Γωνιακή φόρμα -> Εγγενής φόρμα (προσαρμοσμένο στοιχείο ελέγχου).
Η αλληλεπίδραση φαίνεται παρακάτω:
Στην πραγματικότητα, τα στοιχεία ελέγχου εγγενούς φόρμας έχουν επίσης διεπαφές παρόμοιες με το ControlValueAccessor, για παράδειγμα, όταν το Angular συναντά εγγενή στοιχεία ελέγχου εισόδου ή περιοχής κειμένου DOM σε πρότυπα στοιχείων, θα χρησιμοποιεί την εντολή DefaultValueAccessor.
Αξεσουάρ | Στοιχείο φόρμας | ΠροεπιλεγμένηΤιμήAccessor | είσοδος,περιοχή κειμένου | CheckboxControlValueAccessor | είσοδος[type=πλαίσιο ελέγχου] | ΑριθμόςValueAccessor | είσοδος[type=αριθμός] | RadioControlValueAccessor | είσοδος[type=ραδιόφωνο] | RangeValueAccessor | είσοδος[type=εύρος] | SelectControlValueAccessor | διαλέγω | SelectMultipleControlValueAccessor | Επιλέξτε [πολλαπλά] |
Το παραπάνω είναι το στοιχείο ελέγχου Angular form που δημιούργησε το Angular για όλα τα εγγενή στοιχεία φόρμας DOM, δηλαδή το ενσωματωμένο ControlValueAccessor.
Τεκμηρίωση:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Εγγραφείτε σε έναν πάροχο NG_VALUE_ACCESSOR
Μετά την εφαρμογή της διεπαφής ControlValueAccessor, πρέπει επίσης να την καταχωρήσουμε ως NG_VALUE_ACCESSOR, έτσι ώστε το στοιχείο ελέγχου προσαρμοσμένης φόρμας να μπορεί να αναγνωριστεί και να ενσωματωθεί από το Angular, διαφορετικά θα λάβει ένα σφάλμα "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Τεκμηρίωση:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
κωδικοποιώ
Σύμφωνα με τα βήματα, η πλήρης εργασία κωδικοποίησης, το αποτέλεσμα είναι η αρχική απόδοση, ο κώδικας είναι ο εξής.
Σελίδα HTML:
Κωδικός TS:
Αναφορά:
Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Η σύνδεση με υπερσύνδεσμο είναι ορατή. |
Δημοσιεύτηκε στις 2025-4-30 16:00:55
|
|
|
|
