Réinitialiser les formulaires dans Angular 2

1. la méthode resetForm() dans Angular 2
2. Étapes pour réinitialiser un formulaire à l’aide de la méthode resetForm() dans Angular 2

Ce tutoriel vous montrera comment réinitialiser le formulaire dans Angular 2.

La directive ngForm permet de créer et d’initialiser un formulaire et de configurer la validation de ses champs. Une utilisation courante de ngForm consiste à réinitialiser les valeurs de tous les contrôles de formulaire de votre page à leur état initial.

Vous devez ajouter une référence dans votre code HTML à la directive ngForm puis accéder à sa méthode de réinitialisation.

la méthode resetForm() dans Angular 2

La méthode resetForm() est une méthode Angular 2 intégrée qui efface les valeurs du formulaire et les réinitialise à leur état initial.

La méthode resetForm() peut être invoquée en passant un booléen en argument. Les champs et les valeurs du formulaire seront effacés si l’argument booléen est valide.

S’il est faux, seuls les champs dont les propriétés sont définies sur faux seront supprimés.

Étapes pour réinitialiser un formulaire à l’aide de la méthode resetForm() dans Angular 2

Voici les étapes pour réinitialiser un formulaire dans Angular 2 en utilisant la méthode resestForm().

Syntaxe d’import du type de formulaire :

import { ResestFormModule } from '@angular/forms';

Syntaxe d’instanciation du type de formulaire :

let myForm = new ResestForm();

Enregistrez votre formulaire avec votre composant à utiliser dans ce composant et ses composants enfants. Cela garantira que tous les composants enfants connaîtront ce formulaire et pourront l’utiliser.

Appelez cette méthode dans votre code lorsque vous souhaitez réinitialiser le formulaire, par exemple lorsque l’utilisateur clique sur un bouton ou soumet des données sur le formulaire.

Exemple (TypeScript) :

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent  {
    myForm: FormGroup;
    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            name: '2'
        })
    }
    resetForm() {
        this.myForm.reset();
    }
}

Exemple (HTML) :

<form [formGroup]="myForm" novalidate>
<select formControlName="name">
    <option disabled hidden value="null">Please select</option>
    <option value="1">Pakistan</option>
    <option value="2">USA</option>
    <option value="3">Uk</option>
</select>
</form>
<button (click)="resetForm()">reset</button>

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.