TUTORIEL DE VALIDATION DE FORMULAIRE ANGULAR 9

Tutoriel de validation de formulaire Angular 9

Cet article vous donnera un exemple de validation de formulaire Angular 9 sur un exemple de soumission. Ici, vous apprendrez la validation de formulaire dans l'exemple Angular 9. Nous vous aiderons à donner un exemple de la façon d'ajouter une validation de formulaire dans Angular 9. Commençons par l'exemple de validation de formulaire Angular 9.

Nous allons créer un formulaire réactif étape par étape avec validation comme requis, longueur minimale, e-mail, etc. avec l'application Angular 9.

Angular 9 a deux types de formulaires énumérés ci-dessous :

1) Formulaires basés sur des modèles
2) Formulaires réactifs

Ici, nous verrons un exemple d'exemple de formulaires réactifs

Les formulaires réactifs fournissent une approche basée sur un modèle pour gérer les entrées de formulaire dont les valeurs changent au fil du temps. Dans les formulaires réactifs, nous devons importer ReactiveFormsModule à partir de la bibliothèque de formulaires angulaires. nous utiliserons FormControl, FormGroup, FormArray, les classes de validation avec des formulaires réactifs dans l'application angulaire 9.

Si vous avez une forme simple et basique dans votre application angulaire 9, je préférerai utiliser des formes réactives en angulaire. ici, j'écris un exemple simple de formulaires réactifs avec validation en angulaire 9.

Vous devez suivre l'étape ci-dessous pour ajouter la validation du formulaire dans angulaire 9.

Étape 1 : Installez l'application angulaire

Ici, dans cette étape, vous devez créer une nouvelle application ng pour cette démo. si vous avez déjà créé, ne créez pas de nouvelle application angulaire 9.

ng new my-new-app

Étape 2 : Importer FormsModule

Si vous souhaitez créer un formulaire dans une application angulaire, vous devez importer FormsModule à partir de la bibliothèque @angular/forms. ajoutons donc le code suivant au fichier app.module.ts.

src/app/app.module.ts

trading spot vs marge

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Étape 3 : Formulaire avec ngModel

Dans cette étape, nous écrirons le code du formulaire html avec ngModel. ajoutez donc le code suivant au fichier app.component.html.

J'ai utilisé la classe bootstrap sur ce formulaire. si vous voulez ajouter alors suivez aussi ce lien : Installer Boorstrap 4 à Angular 9 .

src/app/app.component.html

 Name Name is required. Name should be 3 character. Email Email is required. Please, enter valid email address. Body Body is required. Submit

Étape 4: fichier Ts mis à jour

Dans le fichier ts. nous écrirons submit() et obtiendrons toutes les valeurs des champs de saisie. ajoutons donc le code suivant au fichier app.component.ts.
src/app/app.component.ts

import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(3)]), email: new FormControl('', [Validators.required, Validators.email]), body: new FormControl('', Validators.required) }); get f(){ return this.form.controls; } submit(){ console.log(this.form.value); } }

Vous pouvez maintenant exécuter votre application à l'aide de la commande suivante :

ng serve

Sortir

{name: 'Hardik Savani', email: 'itsolutionstuff@gmail.com', body: 'This is a test'}

J'espère que cela peut vous aider…

#angular #webdev #javascript

Tutoriel de validation de formulaire Angular 9