it-roy-ru.com

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

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

Отправка формы отменена, так как форма не связана

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

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

55
nick

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

    <button type="button" (click)="submitForm()">
101
Erik Lindblad

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

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

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

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

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

<button type="button"></button>
40
Nour

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

<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>

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

16
Darkrender

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

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

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

5
Igor Babic

В случае, если отправка Формы сопровождается уничтожением компонента, отправка Формы завершается неудачно в состоянии гонки с отсоединением Формы от 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());
}

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

4
dhilt

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

0
Abubakar Ibrahim

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

0
Shahid Islam

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

0
Nir