最乾淨的方式來重置表格

什麼是最簡單的方法來重置Angular 2最新版本的形式？我想在添加帖子後重置輸入文本框。最乾淨的方式來重置表格

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

來源

2017-01-06 Safal Pillai

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

或者：

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

增加對人另一個例子誰不能得到上述工作。

隨着按下按鈕：

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

同樣的事情上面適用，你也可以選擇形式傳遞給newHero功能。

來源

2017-05-15 17:45:57 smac89

這不起作用了。即使在角度樣本 - > https://angular.io/guide/form-validation，如果你按下「新英雄與重置」第二次它仍然會顯示「名稱是必需的」驗證錯誤？步驟是：按「新英雄」，輸入新的值，然後再次按「新英雄」。驗證錯誤不應該出現，因爲表單被重置？ – user1829319

@ user1829319，我不知道你是什麼意思，這不工作了。如果您按照本教程（https://angular.io/guide/forms#show-and-hide-validation-error-messages）附近的[本節]（https：//之前）部分的底部angular.io/guide/forms#submit-the-form-with-ngsubmit）），你會看到他們按照我所顯示的方式重置表單。你應該看到他們最初有一些像''，然後他們做了''。這或多或少是一回事。 – smac89

你是否在我解釋的步驟中嘗試了他們的例子？我的意思是如果表單被重置並且是原始的，那麼你不應該得到驗證錯誤。 – user1829319

最簡單，最明確的形式，以及他們的錯誤狀態（髒，prestine等）

this.form_name.reset();

對錶單的詳細信息清晰的方式讀出這裏

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

PS：當你問的問題是沒有形式用於你的問題代碼中，你正在使用簡單的兩天數據綁定使用ngModel而不是formControl。

form.reset()方法僅適用於formControls重來電

來源

2017-01-06 06:27:32

最乾淨的方式來重置表格

回答

相關問題