2017-01-06 21 views
6

Jaki jest najczystszy sposób resetowania formularzy w najnowszej wersji Angular 2? Chciałbym zresetować wejściowe pola tekstowe po dodaniu postu.Najczystszy sposób resetowania formularzy

@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); 
} 

Odpowiedz

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

czyli

<form #myForm="ngForm" (submit)="addPost(myForm)"> ... </form> 
addPost(form: NgForm){ 
    this.newPost = { 
     title: this.title, 
     body: this.body 
    } 
    this._postService.addPost(this.newPost); 
    form.resetForm(); // or form.reset(); 
} 

Dodawanie kolejny przykład dla ludzi, którzy nie mogą dostać się do pracy powyżej.

Przy naciśnięciu przycisku:

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

To samo odnosi się powyżej, można również zdecydować się przekazać formularz do funkcji newHero.

+0

To już nie działa. Nawet w kanciastej próbce -> https://angular.io/guide/form-validation, jeśli naciśniesz przycisk "Nowy bohater z resetem", po raz drugi nadal będzie wyświetlany komunikat o błędzie "Nazwa jest wymagana" ??? Kroki są następujące: Naciśnij "Nowy bohater", wpisz nowe wartości i ponownie naciśnij "Nowy bohater". Błędy sprawdzania poprawności nie powinny pojawiać się po zresetowaniu formularza? – user1829319

+0

@ user1829319, Nie wiem, co masz na myśli przez to, że już nie działa. Jeśli postępujesz zgodnie z tym [tutorialem] (https://angular.io/guide/forms#show-and-hide-validation-error-messages), w dolnej części sekcji (przed [tą sekcją] (https: // angular.io/guide/forms#submit-the-form-withsngmit)), zobaczysz, że resetują formularz dokładnie tak, jak pokazałem. Powinieneś zobaczyć, że początkowo mieli coś takiego jak '

', później później robią ''. To mniej więcej to samo. – smac89

+0

Czy wypróbowałeś ich przykłady w opisanych krokach? Mam na myśli to, że jeśli formularz jest zresetowany i jest nieskazitelny, nie powinieneś otrzymywać błędu sprawdzania poprawności. – user1829319

4

najprostszy i najczystszy sposób, aby wyczyścić formy oraz ich stany błędów (brudne, prestine etc)

this.form_name.reset(); 

uzyskać więcej informacji na temat form przeczytać tutaj

PS: Jak zadałeś pytanie, nie ma formularza użyte w twoim kodzie pytającym używasz prostego dwudniowego powiązania danych przy użyciu ngModel nie z formControl.

form.reset() metoda działa tylko dla formControls zresetować zadzwonić

Powiązane problemy