Comment créer une case à cocher dans Angular8?

Si vous avez créé n'importe quel type d'application jusqu'à présent, vous êtes déjà conscient de la grande importance qu'une case à cocher détient. Non seulement cela facilite la saisie de données sur n'importe quelle plate-forme, mais cela facilite également le tri rapide des données car il est souvent livré avec la fonction de liste. Dans cet article, nous verrons comment créer une case à cocher dans angular8 dans l'ordre suivant:

• Créer une case à cocher dans Angular8
• Valider la case à cocher
• Ajout de contrôles de formulaire ASync

Créer une case à cocher dans Angular8

Pour expliquer les étapes de création d'une case à cocher dans Angular8, prenons un exemple où nous avons une liste de commandes à choisir et nous devons cela à l'utilisateur sous la forme d'une case à cocher. Pour cela, suivez le code ci-dessous.

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'ordre 4'}]

Dans ce cas, les données sont déjà présentes chez nous et nous avons donc utilisé le code partagé ci-dessus. Dans un scénario réel, ces données seraient probablement importées via une API.

comment configurer atom pour python

Dans cet exemple, nous pouvons également utiliser des formes réactives pour rendre le résultat final plus propre et efficace. Pour comprendre comment procéder, jetez un œil à l'exemple ci-dessous.

import {Component} depuis '@ angular / core' import {FormBuilder, FormGroup} depuis '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) classe d'exportation AppComponent {form: FormGroup ordersData = [] constructeur (formBuilder privé: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} soumettre() { ... } }

Dans le code ci-dessus, nous avons utilisé les éléments suivants.

1. FormGroups: qui représente une forme unique.
2. FormControl: qui représente une seule entrée dans un seul formulaire.
3. FormArray: qui est utilisé pour représenter une collection de tous les FormControls.

Dans l'exemple ci-dessus, nous pouvons également utiliser le service FormBuilder pour créer le formulaire qui ressemblera à ceci.

soumettre

Dans l'exemple ci-dessus, nous avons lié le formulaire avec l'élément de formulaire en utilisant [formGroup] = 'form'.

Maintenant que le formulaire de base a été créé, ajoutons un peu de dynamicité au même via l'utilisation de FormArray comme indiqué ci-dessous.

somme des chiffres en java

import {Component} depuis '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} depuis '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) classe d'exportation AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] constructeur (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ orders: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if premier élément défini sur true, sinon false (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}

Dans l'exemple ci-dessus, après chaque itération de boucle, nous avons créé un nouveau FormControl et pris nos commandes de FormArray. Nous avons défini le premier contrôle sur true et donc le premier ordre a été coché par défaut dans la liste.

Après cela, nous devons lier l'élément FormArray à ce modèle afin d'obtenir les informations de commande spécifiques qui doivent être affichées à l'utilisateur.

{{ordersData [i] .name}} envoyer

Production:

Valider la case à cocher dans Angular8

Jetez un œil à l'exemple ci-dessous pour savoir comment valider une case à cocher.

{{ordersData [i] .name}} Au moins une commande doit être sélectionnée submit ... export class AppComponent {form: FormGroup ordersData = [...] constructeur (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // obtenir une liste de valeurs de case à cocher (booléen) .map (control => control.value) // additionner le nombre de cases à cocher cochées .reduce ((prev, next) => next? prev + next: prev, 0) // si le total n'est pas supérieur au minimum, renvoie le message d'erreur return totalSelected> = min? null: {required: true}} return validator}

Production:

Ajout de contrôles de formulaire ASync

Maintenant que vous savez comment ajouter des cases à cocher dynamiques, voyons comment nous pouvons ajouter ASync à ces formulaires.

import {Component} depuis '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} depuis '@ angular / forms' import {of} depuis 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) classe d'exportation AppComponent {form: FormGroup ordersData = [] constructeur (formBuilder privé: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // Ordres synchrones this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // si le premier élément est défini sur true, sinon 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, nom: 'order 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... import {of} de 'rxjs' ... constructeur (formBuilder privé: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // ordres asynchrones (peut être un appel de service http) de (this.getOrders ()). subscribe (orders => {this.ordersData = commandes this.addCheckboxes ()}) // commandes synchrones // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Avec cela, nous sommes arrivés à la fin de notre article. Maintenant que vous savez comment ajouter une case à cocher à votre angular8, nous espérons que vous l'utiliserez dans votre codage quotidien.

Maintenant que vous connaissez les éléments constitutifs d'Angular, consultez le par Edureka. Angular est un framework JavaScript utilisé pour créer des applications Web évolutives, d'entreprise et performantes côté client. L'adoption du cadre angulaire étant élevée, la gestion des performances de l'application est indirectement dirigée par la communauté, ce qui génère de meilleures opportunités d'emploi. La formation de certification angulaire vise à couvrir tous ces nouveaux concepts autour du développement d'applications d'entreprise.

différence entre java et classe