Как очистить форму после отправки в Angular 2?


87

У меня есть простой угловой компонент 2 с шаблоном. Как очистить форму и все поля после отправки ?. Не могу перезагрузить страницу. После установки данные с date.setValue('')полем по-прежнему touched.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';

@Component({
    selector: 'loading-form',
    templateUrl: 'app/loadings/loading-form.component.html',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('', Validators.required);
        this.capacity = new Control('', Validators.required);
        this.form = fb.group({
            'date': this.date,
            'capacity': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

loading-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
            <label class="form-control-label" for="dateInput">Date</label>
            <input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
                   min="0" placeholder="Enter loading date"
                   [ngFormControl]="form.controls['date']">
        </fieldset>
        <fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
            <label class="form-control-label" for="capacityInput">Capacity</label>
            <input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
                   placeholder="Enter capacity"
                   [ngFormControl]="form.controls['capacity']">
        </fieldset>
        <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
        </button>
    </form>
</div>

Ответы:


135

См. Также https://angular.io/docs/ts/latest/guide/reactive-forms.html (раздел «сбросить флаги формы»)

> = RC.6

В RC.6 должно поддерживаться обновление модели формы. Создание новой группы форм и назначениеmyForm

[formGroup]="myForm"

также будет поддерживаться ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

В новом модуле форм (> = RC.5) NgFormесть reset()метод, а также поддерживается resetсобытие форм . https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179

<= RC.3

Это будет работать:

onSubmit(value:any):void {
  //send some data to backend
  for(var name in form.controls) {
    (<Control>form.controls[name]).updateValue('');
    /*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
    form.controls[name].setErrors(null);
  }
}

Смотрите также


2
@ masel.popowo Да, если вы хотите pristine, ..., то восстановление формы в настоящее время является единственным вариантом.
Günter Zöchbauer

@ günter-zöchbauer, как восстановить форму?
SimonHawesome 02

2
Я сам еще не пробовал, но думаю, вы просто отбросите контрольную группу и создадите новую. Переместите код в функцию, чтобы при необходимости можно было вызывать ее повторно.
Günter Zöchbauer

+1 для setErrors (). Между прочим, я документирую здесь ошибку, которую я допустил на случай, если кто-то другой сделает что-то подобное: если вы используете заполнитель, например, 'foo', не вызывайте control.updateValue ('foo'), а вместо этого вызывайте control.setValue (null)
Майк Аргириу,

Я не знаю о setValue()методе контроля. Только updateValue() github.com/angular/angular/blob/master/modules/angular2/src/…
Günter Zöchbauer,

32

Что касается Angular2 RC5, myFormGroup.reset()похоже, это помогает .


это работает в angular 4, использовал его для сброса проверки формы
Grim

13

Чтобы сбросить форму после отправки, вы можете просто вызвать this.form.reset(). Вызывая reset()его, вы:

  1. Отметьте элемент управления и дочерние элементы управления как нетронутые .
  2. Отметьте элемент управления и дочерние элементы управления как нетронутые .
  3. Установите значение элемента управления и дочерних элементов управления на настраиваемое значение или значение null .
  4. Обновите значение / достоверность / ошибки затронутых сторон.

Пожалуйста, найдите этот запрос на перенос, чтобы получить подробный ответ. К вашему сведению, этот PR уже был объединен с 2.0.0.

Надеюсь, это может быть полезно, и дайте мне знать, если у вас возникнут другие вопросы относительно Angular2 Forms.


1
если я использую сброс, проверки не применяются. как я могу заставить работать оба?
Ниша

10

Сделать звонок clearForm();в вашем .ts файле

Попробуйте, как показано ниже, фрагмент кода, чтобы очистить данные формы.

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}

9
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

@ Это отлично работает, когда нам нужно очистить все поля. Но как мы можем реализовать то же самое, чтобы очистить только определенные поля?
Ахилеш Потури

8

Вот как я это делаю в Angular 7.3

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

Звонить не было необходимости form.clearValidators()


2
Это лучшее (и работает только для меня) решение для очистки формы, созданное с помощью FormBuilder, в котором есть элементы управления с валидаторами.
mmied

7

Вот как я это делаю в Angular 8:

Получите местную ссылку на вашу форму:

<form name="myForm" #myForm="ngForm"></form>
@ViewChild('myForm', {static: false}) myForm: NgForm;

И всякий раз, когда вам нужно сбросить форму, вызовите resetFormметод:

this.myForm.resetForm();

Вам понадобится FormsModulefrom, @angular/formsчтобы он работал. Обязательно добавьте его в свой импорт модуля.


1
@ViewChildв Angular 8 требуется 2 аргумента. @ViewChild('myForm', {static: false}) myForm: NgForm;
Tanzeel

6

Для угловой версии 4 вы можете использовать это:

this.heroForm.reset();

Но вам может понадобиться начальное значение, например:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

Важно решить проблему с нулевым значением в вашей объектной ссылке.

ссылки на ссылку , Поиск «сброс формы флагов».


Спасибо, у меня работает. Это то, что я хочу.
Дхавал Мистри

3

По этому поводу ведется новое обсуждение ( https://github.com/angular/angular/issues/4933 ). Пока есть только несколько хаков, которые позволяют очистить форму, например, воссоздать всю форму после отправки: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/


1
И, наконец, у нас есть способ сделать это правильно: github.com/angular/angular/pull/9974
wawka

1

Нашел другое решение. Это немного взломано, но широко доступно в мире angular2.

Поскольку директива * ngIf удаляет форму и воссоздает ее, можно просто добавить * ngIf в форму и привязать его к какой-то formSuccessfullySentпеременной. => Это воссоздает форму и, следовательно, сбросит статусы управления вводом.

Конечно, вы также должны очистить переменные модели. Мне было удобно иметь определенный класс модели для полей формы. Таким образом, я могу сбросить все поля так же просто, как создать новый экземпляр этого класса модели. :)


Дополнение: я использую AngularDart, у которого пока нет такого метода сброса. По крайней мере, я не обнаружил этого прямо сейчас. : D
Бенджамин Йезуитер

С RC.6 достаточно просто переинициализировать модель форм. Если вы переместите создание модели форм в метод, вызов этого метода сбросит форму.
Günter Zöchbauer

@ GünterZöchbauer Отлично! Я не могу дождаться, чтобы эта функция появилась и в Angular2 для Dart! :) Потому что мой подход как проблема: у меня есть список всех входных элементов в моей форме. Я получаю их через dart-native querySelectorAllin ngAfterViewInit. Я использую этот список, чтобы сфокусировать следующий элемент ввода на keydown.enter вместо отправки формы. Этот список прерывается при использовании ngIf для повторной инициализации формы. :(
Benjamin Jesuiter

Хорошо, я исправил проблему. Я могу повторно запросить экземпляры InputElement при сбросе модели формы.
Benjamin Jesuiter

0

Хм, теперь (23 января 2017 года с angular 2.4.3) я заставил его работать так:

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

0

Код ниже работает для меня в Angular 4

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

0

this.myForm.reset ();

Этого достаточно ... Вы можете получить желаемый результат


1
Добавьте дополнительные объяснения, как эта строка кода решает проблему
Sfili_81

0

Чтобы сбросить полную форму при отправке, вы можете использовать reset () в Angular. Пример ниже реализован в Angular 8. Ниже представлена ​​форма подписки, в которой мы принимаем электронную почту в качестве входных данных.

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

Обратитесь к официальному документу: https://angular.io/guide/forms#show-and-hide-validation-error-messages .


-3
resetForm(){
    ObjectName = {};
}

Хотя этот код может ответить на вопрос, вы должны добавить объяснение, в котором указывается, почему и как он решает проблему.
BDL

он не возвращает классы «затронутый», «первозданный» и т. д. к их исходным значениям.
Pac0 07

@Shivendra Это может сработать специально для вашей проблемы, но не является общим. Вы делаете objectпустым, а не form.
Tanzeel
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.