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" (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.reset(); // or form.resetForm();
}

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

按下按钮：

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

同样适用于上述内容，您也可以选择将表单传递给newHero函数。

Answer 2

清除表单以及错误状态（脏，原始等）的最简单，最干净的方式

this.formName.reset();

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

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

PS：当您提出问题时，您的问题代码中没有使用任何表单，您使用的是使用ngModel的简单的两天数据绑定，而不是formControl。

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

Answer 3

清除表单的最简单方法

maven-surefire-plugin

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

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

用于重置值和状态（原始，触摸..）执行以下操作

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

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

Answer 4

你也可以通过JavaScript来实现：

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

Answer 5

仅使用<div class="parent" ngClass.lt-md="mobile-cell"> <div> <span fxHide fxShow.lt-md="true" class="mobile-label">Text1</span> </div> <div> <span fxHide fxShow.lt-md="true" class="mobile-label">Text2</span> </div> <div> <span fxHide fxShow.lt-md="true" class="mobile-label">Text3</span> </div> .... </div>方法即可重置表单。它会重置表格，但是您可能会遇到诸如验证错误-例如：.mobile-cell > div{ /* your style*/ }

要解决此问题，请使用reset()方法。不仅可以重置表单，还可以重置提交状态以解决您的问题。

Name is required方法实际上是在调用reset（）方法，并且它还在重置提交状态。

Answer 6

Angular Reactive Forms：

onCancel(): void {
  this.registrationForm.reset();
  this.registrationForm.controls['name'].setErrors(null);
  this.registrationForm.controls['email'].setErrors(null);
}

Answer 7

component.html （您命名的表格）

<form [formGroup]="contactForm">

（添加点击事件（click）=“ clearForm（））

<button (click)="onSubmit()" (click)="clearForm()" type="submit" class="btn waves-light" mdbWavesEffect>Send<i class="fa fa-paper-plane-o ml-1"></i></button>

component.ts

 clearForm() {
             this.contactForm.reset();
            }

查看所有代码：https://ewebdesigns.com.au/angular-6-contact-form/ 如何使用Firebase添加联系表单

Answer 8

要重置表单，请使用与组中相同的结构调用具有表单名称的重置功能

addPost(){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this.formName.reset({
        "title": '',
        "body": ''
    });
}

Answer 9

var formButtons = new Vue({
    el: "#formButtons",
    data: {
        buttons: [
            {
                id: "login",
                text: "Login",
                method: "submitForm"
            },
            {
                id: "cancel",
                text: "Cancel",
                method: "clearForm"
            }
        ]
    },
    methods: {
        submitForm: function (event) {
            // Some Code
        },
        clearForm: function (event) {
            // Some Code
        },
        onClick(methodName) {
          this[methodName]()
        }
    },
    template: `
    <div>
        <div class="form-group"  v-for='btn in buttons'>
            <button
                v-bind:id='btn.id'
                v-on:click='onClick(btn.method)'
            >
                {{ btn.text }}
            </button>
        </div>
    </div>
    `
});

Answer 10

用angular2 +中的按钮清除表单的最简单方法是

使用＃

为表单命名

<form #your_form_name (ngSubmit)="submitData()"> </form>

<button (click)="clearForm(Your_form_name)"> clear form </button>

在您的component.ts文件中

clearForm(form: any) {
form.reset();
}

Answer 11

this.<your_form>.form.markAsPristine();
this.<your_form>.form.markAsUntouched();
this.<your_form>.form.updateValueAndValidity();

也可以帮助

最简洁的方式来重置表单

11 个答案: