Façon la plus propre pour réinitialiser les formes

Question

Quelle est la façon la plus propre pour réinitialiser les formes Angulaire 2 version la plus récente? Je voudrais réinitialiser les zones de saisie de texte après l'ajout d'un post.

@Component({
  selector: 'post-div',
  template: `
            <h2>Posts</h2>
            <form (submit)="addPost()">
                <label>Title: </label><input type="text" name="title" [(ngModel)]="title"><br/>
                <label>Body: </label><input type="text" name="body" [(ngModel)]="body"><br/>
                <input type="submit" value="Add Post">
            </form>
            <ul>
                <li *ngFor="let post of posts">
                    <strong>{{post.title}}</strong>
                    <p>{{post.body}}</p>
                </li>
            </ul>
          `,
  providers: [PostService]
});

addPost(){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
}

Answer 1

<form #myForm="ngForm" (submit)="addPost(); myForm.reset()"> ... </form>

Ou:

<form #myForm="ngForm" (submit)="addPost(myForm)"> ... </form>

addPost(form: NgForm){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
    form.reset(); // or form.resetForm();
}

L'ajout d'un autre exemple pour les personnes qui ne peuvent pas obtenir le ci-dessus pour travailler.

Avec le bouton de la presse:

<form #heroForm="ngForm">
    ...
    <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
</form>

La même chose s'applique ci-dessus, vous pouvez également choisir de transmettre le formulaire à l' newHero fonction.

Answer 2

La plus simple et la plus propre façon d'effacer les formulaires ainsi que leurs états d'erreur (sale, vierge, etc)

this.formName.reset();

pour plus d'informations sur les formulaires lire ici

• https://angular.io/docs/ts/latest/guide/forms.html

PS: Comme vous avez posé une question il n'y a pas de formulaire utilisé dans votre question code que vous utilisez simple de deux jours sur la liaison de données à l'aide de ngModel, pas avec formControl.

form.reset() méthode ne fonctionne que pour les formControls reset

Answer 3

facile d'effacer le formulaire

<form #myForm="ngForm" (submit)="addPost();"> ... </form>

puis, en .ts fichier dont vous avez besoin pour accéder à une variable locale de modèle je.e

@ViewChild('myForm') mytemplateForm : ngForm; //import { NgForm } from '@angular/forms';

pour la réinitialisation des valeurs et de l'etat(pristine,touché..) effectuer les opérations suivantes

addPost(){
this.newPost = {
    title: this.mytemplateForm.value.title,
    body: this.mytemplateForm.value.body
}
this._postService.addPost(this.newPost);
this.mytemplateForm.reset(); }

C'est plus propre façon de réinitialiser le formulaire

Answer 4

De le faire avec du simple HTML et javascript par moulage de l'élément HTML de manière à éviter tapuscrit erreurs

<form id="Login">

et dans le composant.fichier ts,

clearForm(){
 (<HTMLFormElement>document.getElementById("Login")).reset();
}

la méthode clearForm() peut être appelée n'importe où tant que de besoin.

Answer 5

Vous pouvez aussi le faire par le biais de JavaScript:

(document.querySelector("form_selector") as HTMLFormElement).reset();