Сброс форм, управляемых шаблонами, в angular 2 (обе модели и проверки)

#angular #angular2-forms

#angular #angular2-формы

Вопрос:

Как мы можем сбросить элементы управления с состояниями проверки управляемых шаблоном форм в angular 2? Я знаю, что элементы управления можно сбросить, установив значения модели, к которым они привязаны. Но как насчет состояний проверки (нетронутых, грязных и т. Д.)?

Я пробовал что-то вроде этого:

 <form (ngSubmit)="onSubmit(playlistForm)" #playlistForm="ngForm">
// Some code here...
</form>

И в контроллере,

 onSubmit(playlistForm: any) {
// ...
  playlistForm.form.reset();
}

Но выше, похоже, на самом деле перенаправляет на ''
И я получаю сообщение об ошибке ниже:

 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

Итак, как мне делать то, что я хочу?

Ответ №1:

Оба они сработали для меня:

 playlistForm.reset();
playlistForm.resetForm(); // I think this is the one to use

В документах Angular есть только resetForm()
https://angular.io/docs/ts/latest/api/forms/index/NgForm-directive.html

1. @StepanZarubin Я использую angular 2.4.0 , ни одна из них не работает для меня

2. reset() работает для меня Angular 6.1.0 из класса FromControl

3. reset () выдает ошибку проверки после отправки. Что мне делать?

Ответ №2:

 <form (ngSubmit)="onSubmit(playlistForm)" #playlistForm="ngForm">
// Some code here...
</form>


onSubmit(playlistForm: ngForm) {
// ...
  playlistForm.form.reset();
}

Ответ №3:

Это сработало для меня:

 <form (ngSubmit)="onSubmit(playlistForm);playlistForm.reset()" #playlistForm="ngForm">
    // Some code here...
</form>

Ответ №4:

 form.resetForm();

Это также сбрасывает состояния проверки формы, в отличие form.reset() от . Работает с управляемыми шаблонами и реактивными подходами.

1. Похоже, это больше не функция.

2. Это так. Я использовал @angular/forms: 8.0.0 , когда был опубликован этот ответ. @angular/forms: 11.2.11 form.resetForm() Насколько я могу судить, я использую и в настоящее время доступен как метод в классе ngForm в указанных версиях и промежуточных версиях.

Ответ №5:

Я использовал ссылку на собственный элемент в .ts и позже вызвал форму, очистил данные формы после отправки с использованием метода сброса

Ответ №6:

Это сработало для меня OnClear() — это дополнительный обратный вызов, который мне нужен для некоторых дополнительных задач.

 <button type="reset" (click)="onClear()">Clear</button>