Самый чистый способ для форм reset

Какой самый чистый способ сброса форм в последней версии 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);
}

Ответы

Ответ 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.

Ответ 2

Самый простой и понятный способ очистки форм, а также состояний их ошибок (грязные, нетронутые и т.д.)

this.formName.reset();

Подробнее о формах читайте здесь

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

PS: Поскольку вы задали вопрос, в коде вашего вопроса не используется форма, вы используете простое двухдневное связывание данных с использованием ngModel, а не с formControl.

Метод form.reset() работает только для вызова сброса formControls

Ответ 3

Самый простой способ очистить форму

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

Это самый чистый способ очистки формы

Ответ 4

Делаем это с помощью простого HTML и javascript путем приведения элемента HTML во избежание ошибок при наборе текста

<form id="Login">

и в файле component.ts,

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

метод clearForm() может вызываться где угодно.

Ответ 5

Вы также можете сделать это через JavaScript:

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

Ответ 6

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

Ответ 7

Для сброса формы вызовите функцию сброса с именем формы в той же структуре, что и в группе

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

Ответ 8

Самый простой способ очистить форму с помощью кнопки в angular2+ - это

дайте вашей форме имя, используя #

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

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

в вашем файле component.ts

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

Ответ 9

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

также может помочь

Ответ 10

    //Declare the jquery param on top after import
declare var $: any;
declare var jQuery: any;

clearForm() {
    $('#contactForm')[0].reset();
}

Ответ 11

Просто для сброса формы используйте метод reset(). Это сбрасывает форму, но вы можете получить такую проблему, как ошибки проверки - например: Name is required

Для решения этой проблемы используйте метод resetForm(). Он сбрасывает форму, а также сбрасывает статус отправки, решая вашу проблему.

Метод resetForm() фактически вызывает метод reset() и дополнительно сбрасывает статус отправки.