npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-input-validation

v3.0.0

Published

Une librairie Angular pour la gestion des messages d'erreur de validation dans les formulaires réactifs.

Downloads

47

Readme

ng-input-validation

La librairie ng-input-validation fournit des composants et des validateurs personnalisés pour simplifier la validation des formulaires dans Angular.

Compatibilité des Versions

La librairie ng-input-validation est compatible avec Angular à partir de la version 17. Assurez-vous d'utiliser une version d'Angular égale ou supérieure pour garantir le bon fonctionnement de la librairie.

Utilisation

  1. Importer le composant :

    Dans le module de ton application ou dans le composant parent, importe le module de la librairie :

    import { NgInputValidationComponent } from "ng-input-validation";
    import { ReactiveFormsModule } from "@angular/forms";

Ajoute NgInputValidationComponent et ReactiveFormsModule à la liste des imports de ton composant :

@Component({
 selector: "app-parent",
 standalone: true,
 imports: [ReactiveFormsModule, NgInputValidationComponent],
})
export class ParentComponent {
 // Logique du composant...
}
  1. Utiliser le composant dans le template :

    Utilise le composant ng-input-validation dans ton template en lui passant les contrôles et les erreurs :

    <form [formGroup]="form">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control" formControlName="name" />
        <ng-input-validation [error]="form.get('name')?.errors" [control]="form.get('name')" [showError]="true"></ng-input-validation>
      </div>
      <!-- Ajoute d'autres champs de formulaire ici -->
    </form>

Propriétés

| Propriété | Type | Description | |-------------|-------------------|--------------------------------------------------| | control | AbstractControl | Le contrôle du formulaire à valider. | | error | any | Les erreurs de validation associées au contrôle. | | showError | boolean | Indique si les erreurs doivent être affichées. |

Types d'erreurs gérés Nativement par Angular

La librairie ng-input-validation prend en charge les types d'erreurs suivants :

| Type d'erreur | Message d'erreur | |---------------|--------------------------------------| | required | Champ requis | | email | Renseignez une adresse e-mail valide | | minlength | xxx caractères minimum | | maxlength | xxx caractères maximum | | min | La valeur minimale autorisée est xxx | | max | La valeur maximale autorisée est xxx | | pattern | Le format du champ est invalide |

Ces messages d'erreur peuvent être personnalisés et affichés dynamiquement en fonction des validations appliquées à chaque champ de formulaire.

Validations personnalisées

En plus des validations natives d'Angular, la librairie propose plusieurs validations personnalisées prêtes à l'emploi :

| Type de validation | Nom du validateur | Description | |--------------------|-------------------------|---------------------------------------------------------------------------------------------------------------| | Alphanumérique | alphaNumericValidator | Valide que la chaîne contient uniquement des lettres et chiffres. | | Numérique | numericValidator | Valide que la chaîne contient uniquement des chiffres. | | NIP | nipValidator | Valide que le numéro de NIP respecte le format 14-0020-19931130 ou 1Z-0020-19931130. | | Téléphone | telephoneValidator | Valide que le numéro de téléphone commence par 077, 066, 065, 074, 062 ou 011 et suit le format 077 XX XX XX. |

Exemple d'utilisation des Validations Personnalisées

Voici comment vous pouvez utiliser les validations personnalisées dans un formulaire réactif.

  1. Ajouter les Validators dans votre composant :

    Dans votre composant, vous pouvez définir un formulaire réactif et utiliser les validateurs personnalisés fournis par la librairie.

    import { Component } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { alphaNumericValidator, numericValidator, nipValidator, telephoneValidator } from 'ng-input-validation';
    
    @Component({
      selector: 'app-validation-form',
      template: `
        <form [formGroup]="form">
          <div>
            <label for="alphanumeric">Alphanumeric</label>
            <input id="alphanumeric" formControlName="alphanumeric" />
            <ng-input-validation [error]="form.get('alphanumeric')?.errors" [control]="form.get('alphanumeric')" [showError]="true"></ng-input-validation>
          </div>
          <div>
            <label for="numeric">Numeric</label>
            <input id="numeric" formControlName="numeric" />
            <ng-input-validation [error]="form.get('numeric')?.errors" [control]="form.get('numeric')" [showError]="true"></ng-input-validation>
          </div>
          <div>
            <label for="nip">NIP</label>
            <input id="nip" formControlName="nip" />
            <ng-input-validation [error]="form.get('nip')?.errors" [control]="form.get('nip')" [showError]="true"></ng-input-validation>
          </div>
          <div>
            <label for="telephone">Téléphone</label>
            <input id="telephone" formControlName="telephone" />
            <ng-input-validation [error]="form.get('telephone')?.errors" [control]="form.get('telephone')" [showError]="true"></ng-input-validation>
          </div>
        </form>
      `
    })
    export class ValidationFormComponent {
      form: FormGroup;
    
      constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
          alphanumeric: ['', [Validators.required, alphaNumericValidator()]],
          numeric: ['', [Validators.required, numericValidator()]],
          nip: ['', [Validators.required, nipValidator()]],
          telephone: ['', [Validators.required, telephoneValidator()]]
        });
      }
    }
  2. Explication de chaque validation personnalisée :

    • alphaNumericValidator() : Valide que le champ contient uniquement des lettres et des chiffres.
    • numericValidator() : Valide que le champ contient uniquement des chiffres.
    • nipValidator() : Valide que le champ contient un NIP valide (format 14-0020-19931130 ou 1Z-0020-19931130).
    • telephoneValidator() : Valide que le champ contient un numéro de téléphone valide qui commence par 077, 066, 065, 074, 062 ou 011 et suit le format 077 XX XX XX.

Gestion des Erreurs Provenant du Backend

La librairie ng-input-validation permet également d'afficher les erreurs renvoyées par le backend directement dans le formulaire. Cela peut être utile lorsque vous recevez des erreurs de validation depuis une API ou un service backend et que vous souhaitez les afficher aux utilisateurs.

Utilisation des erreurs backend

  1. Ajout des propriétés backendError et formField :

    Vous pouvez passer un tableau d'erreurs renvoyées par le backend en utilisant la propriété backendError, associée à un champ spécifique du formulaire via la propriété formField.

    Exemple d'utilisation dans un template Angular :

    <form [formGroup]="form">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" id="email" class="form-control" formControlName="email" />
        <ng-input-validation [error]="form.get('email')?.errors"
                             [control]="form.get('email')"
                             [showError]="true"
                             [backendError]="backendErrors"
                             [formField]="'email'">
        </ng-input-validation>
      </div>
      <!-- Ajoutez d'autres champs ici -->
    </form>
  2. Structure des erreurs backend :

    L'erreur backend est un tableau d'erreurs associé à chaque champ du formulaire. Voici un exemple de la structure des erreurs que vous pouvez recevoir :

    {
      "email": ["L'adresse e-mail est invalide", "L'adresse e-mail est déjà utilisée"],
      "password": ["Le mot de passe est trop court"]
    }
  3. Affichage dans le template :

    Le composant ng-input-validation affichera automatiquement les erreurs sous chaque champ de formulaire correspondant si le tableau backendError contient des erreurs pour ce champ. Exemple de code :

    <div *ngIf="Array.isArray(backendError[formField]) && backendError[formField]?.length > 0">
        <div class="text-error-validation">
            <p *ngFor="let error of backendError[formField]">{{ error }}</p>
        </div>
    </div>

Propriétés pour les erreurs backend

| Propriété | Type | Description | |----------------|---------|-----------------------------------------------------------| | backendError | any[] | Un tableau contenant les erreurs provenant du backend. | | formField | any | Le champ de formulaire auquel les erreurs sont associées. |

Cette fonctionnalité permet de gérer de manière fluide l'affichage des messages d'erreurs venant du backend directement dans vos formulaires Angular.

Keywords

  • Angular
  • Validation
  • Formulaires
  • Erreurs
  • Librairie
  • ng-input-validation
  • alphanumérique
  • nip
  • téléphone