Wie lösche ich das Formular nach dem Absenden in Angular 2?

Ich habe eine einfache eckige 2-Komponente mit Vorlage. Wie lösche ich das Formular und alle Felder nach dem Absenden? Ich kann die Seite nicht neu laden. Nach dem Einstellen der Daten mit date.setValue('')Feld ist Stil touched.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';

@Component({
    selector: 'loading-form',
    templateUrl: 'app/loadings/loading-form.component.html',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('', Validators.required);
        this.capacity = new Control('', Validators.required);
        this.form = fb.group({
            'date': this.date,
            'capacity': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

load-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls['date']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls['capacity']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>

Siehe auch https://angular.io/docs/ts/latest/guide/reactive-forms.html (Abschnitt "Zurücksetzen der Formularflags")

> = RC.6

In RC.6 sollte das Aktualisieren des Formularmodells unterstützt werden. Neue Formulargruppe erstellen und zuweisenmyForm

[formGroup]="myForm"

wird ebenfalls unterstützt ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

Im neuen Formularmodul (> = RC.5) NgFormgibt es eine reset()Methode und unterstützt auch ein Formularereignis reset. https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Das wird funktionieren:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

Siehe auch

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/6169
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/4914
• https://github.com/angular/angular/issues/6371

Ab Angular2 RC5 myFormGroup.reset()scheint der Trick zu tun.

Um Ihr Formular nach dem Absenden zurückzusetzen, können Sie es einfach aufrufen this.form.reset(). Durch den Aufruf wird reset()es:

1. Markieren Sie das Steuerelement und die untergeordneten Steuerelemente als makellos .
2. Markieren Sie das Steuerelement und die untergeordneten Steuerelemente als unberührt .
3. Setzen Sie den Wert von Steuerelementen und untergeordneten Steuerelementen auf benutzerdefinierten Wert oder Null .
4. Aktualisieren Sie Wert / Gültigkeit / Fehler der betroffenen Parteien.

In dieser Pull-Anfrage finden Sie eine detaillierte Antwort. Zu Ihrer Information, diese PR wurde bereits auf 2.0.0 zusammengeführt.

Hoffentlich kann dies hilfreich sein und mich wissen lassen, wenn Sie weitere Fragen zu Angular2 Forms haben.

Rufen Sie clearForm();in Ihrer .ts-Datei an

Versuchen Sie es wie im folgenden Beispielcode-Snippet, um Ihre Formulardaten zu löschen.

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

So mache ich das in Angular 7.3

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

Es war nicht nötig anzurufen form.clearValidators()

So mache ich es Angular 8:

Holen Sie sich eine lokale Referenz Ihres Formulars:

<form name="myForm" #myForm="ngForm"></form>

@ViewChild('myForm', {static: false}) myForm: NgForm;

Rufen Sie die resetFormMethode auf, wenn Sie das Formular zurücksetzen müssen :

this.myForm.resetForm();

Sie benötigen FormsModulevon, @angular/formsdamit es funktioniert. Stellen Sie sicher, dass Sie es zu Ihren Modulimporten hinzufügen.

Für die eckige Version 4 können Sie Folgendes verwenden:

this.heroForm.reset();

Möglicherweise benötigen Sie jedoch einen Anfangswert wie:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

Es ist wichtig, das Nullproblem in Ihrer Objektreferenz zu beheben.

Referenz Link , Suche nach „Zurücksetzen der Form Flags“.

Es gibt eine neue Diskussion darüber ( https://github.com/angular/angular/issues/4933 ). Bisher gibt es nur einige Hacks, mit denen das Formular gelöscht werden kann, z. B. die Neuerstellung des gesamten Formulars nach dem Absenden: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/

Ich habe eine andere Lösung gefunden. Es ist ein bisschen hackig, aber in der Welt von angle2 weit verbreitet.

Da die Direktive * ngIf das Formular entfernt und neu erstellt, kann dem Formular einfach ein * ngIf hinzugefügt und an eine formSuccessfullySentVariable gebunden werden. => Dadurch wird das Formular neu erstellt und daher der Status der Eingabesteuerung zurückgesetzt.

Natürlich müssen Sie auch die Modellvariablen löschen. Ich fand es praktisch, eine bestimmte Modellklasse für meine Formularfelder zu haben. Auf diese Weise kann ich alle Felder zurücksetzen, so einfach wie das Erstellen einer neuen Instanz dieser Modellklasse. :) :)

Hm, jetzt (23. Januar 2017 mit Winkel 2.4.3) habe ich es so gemacht:

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

Der folgende Code funktioniert für mich in Angular 4

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

this.myForm.reset ();

Das ist alles genug ... Sie können die gewünschte Ausgabe erhalten

Um das vollständige Formular beim Senden zurückzusetzen, können Sie reset () in Angular verwenden. Das folgende Beispiel ist in Angular 8 implementiert. Unten finden Sie ein Abonnementformular, in dem wir E-Mails als Eingabe verwenden.

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

Siehe offizielles Dokument: https://angular.io/guide/forms#show-and-hide-validation-error-messages .

resetForm(){
    ObjectName = {};
}