webentwicklung-frage-antwort-db.com.de

Zurücksetzen eines Formulars in Angular 2 nach dem Senden

Mir ist bekannt, dass es in Angular 2 momentan nicht möglich ist, ein Formular einfach in einen ursprünglichen Zustand zurückzusetzen. Beim Stöbern bin ich auf eine Lösung gestoßen, die die Formularfelder zurücksetzt.

Es wurde vorgeschlagen, dass ich die Kontrollgruppe löschen und eine neue erstellen muss, um das Formular als makellos neu zu erstellen. Ich habe Schwierigkeiten, den besten Weg zu finden, dies zu tun. Ich weiß, dass ich die Formularerstellung in eine Funktion einpacken muss, aber ich stoße dabei auf Fehler, wenn dies im Konstruktor geschieht.

Was wäre der beste Weg, um die Kontrollgruppe neu zu erstellen, um das Formular vollständig zurückzusetzen?

class App {

    name: Control;
    username: Control;
    email: Control;

    form: ControlGroup;

    constructor(private builder: FormBuilder) {

        this.name = new Control('', Validators.required);
        this.email = new Control('', Validators.required);
        this.username = new Control('', Validators.required);

        this.form = builder.group({
            name: this.name,
            email: this.email,
            username: this.username
        });
    }

    onSubmit(value: any): void {  
        // code that happens when form is submitted
        // then reset the form
        this.reset();
    }

    reset() {
        for (let name in this.form.controls) {
            this.form.controls[name].updateValue('');
            this.form.controls[name].setErrors(null);
        }
    }
}
56
lukemcd

> = RC.6

Unterstützen Sie das Zurücksetzen von Formularen und pflegen Sie einen submitted-Status.

console.log(this.form.submitted);
this.form.reset()

oder

this.form = new FormGroup()...;

update

Um einige Dinge zu aktualisieren, die erst beim Erstellen des Formulars initialisiert werden, sind einige zusätzliche Messungen erforderlich

<form *ngIf="showForm"

  showForm:boolean = true;
  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

Plunker-Beispiel

original <= RC.5 Verschieben Sie einfach den Code, mit dem das Formular erstellt wird, in eine Methode und rufen Sie es erneut auf, nachdem Sie "submit" behandelt haben:

@Component({
  selector: 'form-component',
  template: `
    <form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </form>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
`
})
class FormComponent {

  name:Control;
  username:Control;
  email:Control;

  form:ControlGroup;

  constructor(private builder:FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.name = new Control('', Validators.required);
    this.email = new Control('', Validators.required);
    this.username = new Control('', Validators.required);

    this.form = this.builder.group({
      name: this.name,
      email: this.email,
      username: this.username
    });
  }

  onSubmit(value:any):void {
    // code that happens when form is submitted
    // then reset the form
    this.reset();
  }

  reset() {
    this.createForm();
  }
}

Plunker-Beispiel

65

Verwenden Sie NgForms .resetForm() anstelle von .reset(), da dies die Methode ist, die in der öffentlichen API von NgForm offiziell dokumentiert ist. (Ref [ 1 ])

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">

Die .resetForm()-Methode setzt NgForm von FormGroup zurück und setzt das submit-Flag auf false (siehe [ 2 ]).

Getestet in @angular Versionen 2.4.8 und 4.0.0-rc3

25
Somo S.

Für Angular 2 Final haben wir jetzt eine neue API, die das Formular sauber zurücksetzt:

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

Diese API setzt nicht nur die Formularwerte zurück, sondern setzt auch die Formularfeldzustände auf ng-pristine und ng-untouched zurück.

25

Ich weiß nicht, ob ich auf dem richtigen Weg bin, aber ich habe es in ng 2.4.8 mit den folgenden Formular-/Submit-Tags zum Laufen gebracht:

<form #heroForm="ngForm" (ngSubmit)="add(newHero); heroForm.reset()">
<!-- place your input stuff here -->
<button type="submit" class="btn btn-default" [disabled]="!heroForm.valid">Add hero</button>

Scheint den Trick zu tun und setzt die Felder des Formulars wieder auf "makellos".

6
Christof Kälin

Als ich den Angular Basics Guide für Formulare durchging und auf das Zurücksetzen von Formularen stieß, war ich sehr überrascht, als ich in Bezug auf die Lösung, die sie geben, das Folgende lese.

Dies ist eine vorübergehende Problemumgehung, während wir auf eine ordnungsgemäße Formularrücksetzungsfunktion warten.

Ich persönlich habe nicht getestet, ob die von ihnen bereitgestellte Problemumgehung funktioniert (ich nehme an, dass dies der Fall ist), aber ich glaube, dass dies nicht ordentlich ist und dass es einen besseren Weg geben muss, um das Problem zu lösen. 

Gemäß der FormGroup API (die als stabil markiert ist) gibt es bereits eine 'Reset'-Methode.

Ich habe folgendes versucht In meiner template.html-Datei hatte ich

<form (ngSubmit)="register(); registrationForm.reset();" #registrationForm="ngForm">
    ...
</form>

Beachten Sie, dass ich im Formularelement eine Vorlagenreferenzvariable 'registrationForm' und die ngForm-Direktive initialisiert habe, die "das Formular als Ganzes steuert". Dadurch erhielt ich Zugriff auf die Methoden und Attribute der herrschenden FormGroup, einschließlich der reset () -Methode.

Binden dieses Methodenaufrufs an das ngSubmit -Ereignis wie oben angezeigt, setzen Sie das Formular zurück (einschließlich unberührter, fehlerhafter, Modellzustände usw.), nachdem die register () -Methode abgeschlossen ist. Für eine Demo ist dies in Ordnung, für reale Anwendungen jedoch nicht sehr hilfreich.

Stellen Sie sich vor, die Methode register () führt einen Aufruf an den Server aus. Wir möchten das Formular zurücksetzen, wenn wir wissen, dass der Server antwortet, dass alles in Ordnung ist. Das Aktualisieren des Codes auf die folgenden Punkte ist für dieses Szenario gedacht.

In meiner template.html-Datei:

<form (ngSubmit)="register(registrationForm);" #registrationForm="ngForm">
    ...
</form>

Und in meiner komponente.ts-Datei:

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Somewhere within the asynchronous call resolve function
   form.reset();
  }
}

Übergeben Sie den Verweis 'registrationForm' an die Methode, so können Sie die reset-Methode an dem Punkt aufrufen, an dem Sie sie ausführen möchten.

Hoffe, das hilft dir in irgendeiner Weise. :)

Note: Dieser Ansatz basiert auf Angular 2.0.0-rc.5

6
JeanPaul A.

Wenn Sie nur die Funktion reset() aufrufen, wird die Formularsteuerung nicht in den ursprünglichen Zustand versetzt. Android.io-Dokumente bieten eine Lösung für dieses Problem.

Komponente.ts

  active = true; 

  resetForm() {
      this.form.reset();
      this.active = false;
      setTimeout(() => this.active = true, 0);
  }

component.html

<form *ngIf="active">
5
aolmez

Ich verwende reaktive Formen in Winkel 4 und dieser Ansatz funktioniert für mich:

    this.profileEditForm.reset(this.profileEditForm.value);

siehe Formflags zurücksetzen im Dokument Grundlegendes

1
mike tannel

Bitte verwenden Sie das folgende Format, es funktioniert perfekt für mich ... Ich habe viele Möglichkeiten geprüft, aber das funktioniert einwandfrei .<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm"> .... </form>

0
Giri vrc

wenn jemand nur eine bestimmte Formularsteuerung löschen möchte, kann man diese verwenden

formSubmit(){
this.formName.patchValue({
         formControlName:''
          //or if one wants to change formControl to a different value on submit
          formControlName:'form value after submission'     
    });
}
0
Sai Krishna

Ich habe in ähnlichem Fall die Antwort von Günter Zöchbauer verwendet, und es war perfekt für mich, die Formularerstellung in eine Funktion zu verschieben und von ngOnInit () zu nennen.

Zur Veranschaulichung habe ich es so gemacht, einschließlich der Initialisierung der Felder:

ngOnInit() {
    // initializing the form model here
    this.createForm();
}

createForm() {
    let EMAIL_REGEXP = /^[^@][email protected]([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too

    this.userForm = new FormGroup({
        name: new FormControl('', [Validators.required, Validators.minLength(3)]),
        city: new FormControl(''),
        email: new FormControl(null, Validators.pattern(EMAIL_REGEXP))
    });

    this.initializeFormValues();
}

initializeFormValues() {
    const people = {
        name: '',
        city: 'Rio de Janeiro',  // Only for demonstration
        email: ''
    };
    (<FormGroup>this.userForm).setValue(people, { onlySelf: true });
}

resetForm() {
    this.createForm();
    this.submitted = false;
}

Ich habe dem Formular eine Schaltfläche für einen Smart Reset (mit den Feldern Initialisierung) hinzugefügt:

In der HTML-Datei (oder Inline-Vorlage): 

<button type="button" [disabled]="userForm.pristine" (click)="resetForm()">Reset</button>

Nach dem ersten Laden des Formulars oder nach dem Klicken auf die Schaltfläche "Zurücksetzen" haben wir den folgenden Status:

FORM pristine: true 
FORM valid: false (because I have required a field) 
FORM submitted: false
Name pristine: true
City pristine: true
Email pristine: true

Und all die Feldinitialisierungen, die ein einfaches form.reset () für uns nicht macht! :-)

0
Julio Ventura