最简洁的方式来重置表单

Question

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

Answer 1

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

要么:

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

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

为那些无法完成上述工作的人添加另一个示例.

按下按钮:

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

同样的事情适用于上面,您也可以选择将表单传递给ngForm函数.

Answer 2

清除表单以及错误状态(脏,原始等)的最简单,最干净的方法

this.formName.reset();

有关表格的更多信息,请阅读此处

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

PS:当你问一个问题时,你的问题代码中没有使用任何形式你使用ngModel使用简单的两天数据绑定,而不是formControl.

form.reset() 该方法仅适用于formControls重置调用

Answer 3

在 Angular 13 中添加了一个有趣的功能：创建表单控件时可以使用该initialValueIsDefault选项，因此在使用时reset()表单的值将被设置为其初始值。

我发现这对于更大的表单非常有用，如果您有重置按钮或类似的逻辑。

有关更多信息，请参阅 GitHub 上的功能 PR：https ://github.com/angular/angular/pull/44434

更新

该initialValueIsDefault选项已被弃用。nonNullable代替使用。查看文档以获取更多信息： https ://angular.dev/api/forms/FormControlOptions

Answer 4

清除表格的最简单方法

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

然后在.ts文件中你需要访问模板的局部变量即

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

重置值和状态(原始,触摸..)执行以下操作

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

这是清除表单最清洁的方法

Answer 5

通过转换HTML元素,使用简单的HTML和javascript来完成此操作,以避免打字稿错误

<form id="Login">

并在component.ts文件中,

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

clearForm()可以根据需要在任何地方调用该方法.