Angular Реактивные формы: как reset формировать состояние и сохранять значения после отправки

В реакционной форме Angular. Как reset только состояние формы после успешной отправки?

Вот процесс:

  • Создайте форму и setValue из результата службы
  • Измените значения и отправьте форму
  • Если форма правильно отправлена ​​на обслуживание, то reset и сохранить значения

Как сохранить значения как измененные и reset форму в ее первозданном состоянии.

Форма form.reset() просто пустая. Но если я этого не называю, состояние не reset, и, например, мои проверки в зависимости от классов состояний формы (девственных, грязных, действительных и т.д.) Все еще существуют.

Ответы

Ответ 1

Решение @smnbbrv работает очень хорошо.

Вы также можете указать фактическое значение формы для метода reset().

Учитывая факт, что myReactiveForm является реактивной формой в вашем компоненте. После успешной отправки вашей формы (например, путем вызова службы), вы можете:

this.myReactiveForm.reset(this.myReactiveForm.value);

Это будет reset форма и задайте значения "новой" формы для того же значения, которое вы создали.

Этот метод можно увидеть в примере Tour of Hero Официальный Angular.io doc

Ответ 2

Это довольно легко:

this.form.markAsPristine();
this.form.markAsUntouched();

Это сбрасывает метаданные формы, и форма снова начинается.

Ответ 3

Внимание для пользователей angular/material2

Есть дополнительная сложность, если вы используете угловые элементы управления материалом, с mat-error для отображения ваших ошибок. Такие ошибки отображаются на основе результата ErrorStateMatcher (в дополнение к любому *ngIf вы, возможно, применили).

По умолчанию ErrorStateMatcher отображает ошибки, если верно следующее:

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean 
{
   return !!(control && control.invalid && (control.touched || (form && form.submitted)));
}

Так что это говорит о том, что если форма когда-либо была отправлена и элемент управления становится недействительным (согласно правилам валидации), то будет отображаться ошибка. Это часто не то, что вы хотите (особенно если вы читаете этот вопрос!).

Глядя на исходный код - нет способа установить resetForm submitted = false если вы не resetForm resetForm для директивы ngForm (не для объекта FormGroup). Установка состояний как нетронутых или нетронутых не сбрасывает представленные в false.

Если вы используете mat-error вам может быть проще создать собственный ErrorStateMatcher (простой интерфейс) для пользовательской логики, если это проблема.

Также обратите внимание, что ErrorStateMatcher только в угловом материале - и не является частью стандартных угловых форм.

Ответ 4

Для реактивных форм, что работало для меня при использовании angular 7: было использовать шаблонно-управляемую форму и передавать ее через обработчик отправки формы следующим образом

// component.html
 <form #f="ngForm" [formGroup]="form" (ngSubmit)="onSubmit(f)" novalidate>
 ....
</form>


// component.ts

onSubmit(form: NgForm) {

// reset form here
 form.form.markAsPristine();
 form.resetForm();
}

Это сбросит форму и отправленное состояние по умолчанию.