Πώς να δημιουργήσετε ένα πλαίσιο ελέγχου στο Angular8;

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

• Δημιουργία πλαισίου ελέγχου στο Angular8
• Επικύρωση του πλαισίου ελέγχου
• Προσθήκη στοιχείων ελέγχου φόρμας ASync

Δημιουργία πλαισίου ελέγχου στο Angular8

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

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, όνομα: 'παραγγελία 4'}]

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

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

εισαγωγή {Component} από το '@ angular / core' εισαγωγή {FormBuilder, FormGroup} από το '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) κλάση εξαγωγής AppComponent {form: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({παραγγελίες: []})} υποβάλλουν() { ... } }

Στον παραπάνω κώδικα, χρησιμοποιήσαμε τα ακόλουθα.

1. FormGroups: που αντιπροσωπεύει μία μόνο φόρμα.
2. FormControl: που αντιπροσωπεύει μία μόνο καταχώριση σε μία φόρμα.
3. FormArray: που χρησιμοποιείται για να αντιπροσωπεύει μια συλλογή όλων των FormControls.

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

υποβάλλουν

Στο παραπάνω παράδειγμα, έχουμε δεσμεύσει τη φόρμα με στοιχείο φόρμας χρησιμοποιώντας το [formGroup] = 'form'.

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

ρίξτε διπλό στο int στην Ιάβα

εισαγωγή {Component} από '@ angular / core' εισαγωγή {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} από '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) κλάση εξαγωγής AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' παραγγελία 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] buildor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ παραγγελίες: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // εάν το πρώτο στοιχείο ορίστηκε σε true, else false (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (επιλεγμένοOrderIds)}}

Στο παραπάνω παράδειγμα, μετά από κάθε επανάληψη βρόχου έχουμε δημιουργήσει ένα νέο FormControl και πάρουμε τις παραγγελίες μας από το FormArray. Έχουμε ορίσει τον πρώτο έλεγχο ως αληθινό και έτσι η πρώτη παραγγελία έχει ελεγχθεί από τη λίστα από προεπιλογή.

Μετά από αυτό πρέπει να συνδέσουμε το στοιχείο FormArray σε αυτό το πρότυπο για να λάβουμε τις συγκεκριμένες πληροφορίες παραγγελίας που πρέπει να εμφανίζονται στον χρήστη.

{{ordersData [i] .name}} υποβολή

Παραγωγή:

Επικύρωση του πλαισίου ελέγχου στο Angular8

Ρίξτε μια ματιά στο παρακάτω παράδειγμα για να μάθετε πώς να επικυρώνετε ένα πλαίσιο ελέγχου.

{{ordersData [i] .name}} Πρέπει να επιλεγεί τουλάχιστον μία παραγγελία υποβολή ... εξαγωγή κλάσης AppComponent {form: FormGroup ordersData = [...] buildor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({παραγγελίες: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // λάβετε μια λίστα τιμών πλαισίων ελέγχου (boolean) .map (control => control.value) // συνολικά τον αριθμό των επιλεγμένων πλαισίων ελέγχου .reduce ((prev, next) => next? prev + επόμενο: prev, 0) // αν το σύνολο δεν είναι μεγαλύτερο από το ελάχιστο, επιστρέψτε το μήνυμα σφάλματος return totalSelected> = min? null: {απαιτείται: true}} επιστροφή επικυρωτή}

Παραγωγή:

Προσθήκη στοιχείων ελέγχου φόρμας ASync

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

εισαγωγή {Component} από '@ angular / core' εισαγωγή {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} από '@ angular / form' import {of} από το 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) κλάση εξαγωγής AppComponent {form: FormGroup ordersData = [] buildor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({παραγγελίες: new FormArray ([], minSelectedCheckboxes (1))}) // σύγχρονες παραγγελίες this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // εάν το πρώτο στοιχείο έχει οριστεί σε true, αλλιώς false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, name: 'order 4'}]} submit () {const selectOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (επιλεγμένοOrderIds)}} ... εισαγωγή {από} από το 'rxjs' ... κατασκευαστή (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({παραγγελίες: new FormArray ([], minSelectedCheckboxes (1))}) // εντολές async (θα μπορούσε να είναι μια κλήση υπηρεσίας http) του = παραγγελίες this.addCheckboxes ()}) // σύγχρονες παραγγελίες // this.ordersData = this.getOrders () // this.addCheckboxes ()}

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

πώς να ρυθμίσετε το classpath στο java

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