Angular 2: отправка формы отменена, потому что форма не подключена

У меня есть модальное окно, содержащее форму, при уничтожении модального окна в консоли появляется следующая ошибка:

Отправка формы отменена, потому что форма не подключена

Модальное окно добавляется к <modal-placeholder>элементу, который является прямым потомком <app-root>моего элемента верхнего уровня.

Как правильно удалить форму из DOM и избавиться от этой ошибки в Angular 2? Я сейчас используюcomponentRef.destroy();

Могут быть и другие причины, по которым это происходит, но в моем случае у меня была кнопка, которая интерпретировалась браузером как кнопка отправки, и, следовательно, форма была отправлена, когда была нажата кнопка, вызвавшая ошибку. Добавление type = "button" устранило проблему. Полный элемент:

    <button type="button" (click)="submitForm()">

В теге формы вы должны написать следующее:

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

и внутри формы у вас должна быть кнопка отправки:

 <button type="submit"></button>

И самое главное, если у вас есть какие-то другие кнопки в вашей форме, вы должны добавить type="button"к ним. Если оставить typeатрибут по умолчанию (который, я думаю, есть submit), появится предупреждающее сообщение.

<button type="button"></button>

Так что сегодня я столкнулся с той же проблемой, только без модального окна. У меня в форме две кнопки. Один из них отправляет форму, а другой при нажатии возвращает на предыдущую страницу.

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

Нажатие на первую кнопку с routerLink делает именно то, что должно, но также, очевидно, пытается отправить форму, а затем вынуждено отказаться от отправки формы, потому что страница, на которой была форма, отключена от DOM во время отправки.

Похоже, что это то же самое, что происходит с вами, за исключением модального окна вместо всей страницы.

Проблема устраняется, если вы прямо укажете тип второй кнопки, отличный от отправки.

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

Поэтому, если вы закрываете модальное окно с помощью кнопки «Отмена» или чего-то в этом роде, указание типа этой кнопки, как показано выше, должно решить вашу проблему.

В элементе формы вам нужно определить метод отправки (ngSubmit), например: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

а на кнопке отправки вы опускаете метод щелчка, потому что ваша форма теперь связана с методом отправки: <button class="btn btn-success" type="submit">Save</button>кнопка должна быть типа отправки.

В коде компонента вы реализуете метод «onSubmit», например, примерно так: onSubmit(value: ICurrency) { ... } Этот метод получает объект значения со значениями из полей формы.

В случае, если отправка формы сопровождается уничтожением компонента, отправка формы завершается ошибкой в ​​состоянии гонки с отсоединением формы от DOM. Скажем, у нас есть

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

Если saveDataасинхронный (например, сохраняет данные через вызов API), то можно дождаться результата:

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

Если вам нужно немедленно отказаться от формы, подход с нулевой задержкой также должен работать. Это гарантирует, что отсоединение DOM будет в следующем цикле событий после того, как была вызвана отправка формы:

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

Это должно работать независимо от типа кнопки.

У меня недавно была эта проблема, и я event.preventDefault()работал на меня. Добавьте его в свой метод события клика.

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

И:

submitForm(event: Event) {
  event.preventDefault();
  // ...
}

Я вижу это в Angular 6, даже без кнопок отправки. происходит, когда в одном шаблоне есть несколько форм. не уверен, есть ли решение / какое решение.

У меня было это предупреждение, я изменил тип кнопки «отправить» на «кнопку». Проблема решена.

Если вы по-прежнему хотите сохранить функциональность кнопки типа «отправить», вам не следует использовать событие щелчка для этой кнопки. Вместо этого вы должны использовать в форме событие ngSubmit.

Пример:

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>

Возможно, вы переходите на другую страницу при отправке формы. Используйте программную навигацию по маршруту, как в следующем примере, вместо передачи routerlinkв шаблон:

router.navigate(['/your/router/path'])