Formulare in Angular 2 zurücksetzen

1. die Methode resetForm() in Angular 2
2. Schritte zum Zurücksetzen eines Formulars mit der Methode resetForm() in Angular 2

Dieses Tutorial zeigt Ihnen, wie Sie das Formular in Angular 2 zurücksetzen.

Die ngForm-Direktive bietet eine Möglichkeit, ein Formular zu erstellen und zu initialisieren und die Validierung für seine Felder einzurichten. Eine häufige Verwendung für ngForm ist das Zurücksetzen der Werte aller Formularsteuerelemente auf Ihrer Seite auf ihren ursprünglichen Zustand.

Sie müssen in Ihrem HTML-Code einen Verweis auf die ngForm-Direktive hinzufügen und dann auf ihre Reset-Methode zugreifen.

die Methode resetForm() in Angular 2

Die Methode resetForm() ist eine in Angular 2 eingebaute Methode, die die Formularwerte löscht und auf ihren Ausgangszustand zurücksetzt.

Die Methode resetForm() kann aufgerufen werden, indem ein boolescher Wert als Argument übergeben wird. Die Felder und Werte des Formulars werden gelöscht, wenn das boolesche Argument gültig ist.

Wenn es falsch ist, werden nur die Felder mit auf falsch gesetzten Eigenschaften entfernt.

Schritte zum Zurücksetzen eines Formulars mit der Methode resetForm() in Angular 2

Im Folgenden sind die Schritte zum Zurücksetzen eines Formulars in Angular 2 mit der Methode resestForm() beschrieben.

Syntax zum Importieren des Formulartyps:

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

Syntax zum Instanziieren des Formulartyps:

let myForm = new ResestForm();

Registrieren Sie Ihr Formular mit Ihrer Komponente, die in dieser Komponente und ihren untergeordneten Komponenten verwendet werden soll. Dadurch wird sichergestellt, dass alle untergeordneten Komponenten dieses Formular kennen und verwenden können.

Rufen Sie diese Methode in Ihrem Code auf, wenn Sie das Formular zurücksetzen möchten, z. B. wenn der Benutzer auf eine Schaltfläche klickt oder Daten im Formular übermittelt.

Beispiel (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();
    }
}

Beispiel (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>

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.