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

84

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

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

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

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

Ник
источник
1
Возможный дубликат сообщения об ошибке «
Саравана
у вас был * ngIf, что скрыть и показать форму?
mickdev 01
@mickdev no * ng Если я уничтожаю модальное окно вот так componentRef.destroy();, я добавил больше деталей к своему вопросу. Благодаря!
Ник
2
@mickdev, что мне делать, если я использую * ngif, чтобы скрыть и показать форму
июнь 711, 05

Ответы:

184

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

    <button type="button" (click)="submitForm()">
Эрик Линдблад
источник
36
Я не уверен, почему этот ответ был принят, потому что при этом вы теряете возможность нажать клавишу ВВОД, чтобы отправить форму.
Питер Лабанка
7
Ответ Нура самый простой и позволяет вводить ключ.
Heiner
2
Это устранило мою проблему, когда я реализовывал кнопку CANCEL в форме, которая удаляла форму со страницы с помощью директивы * ngIf. У меня есть кнопка СОХРАНИТЬ, которая запускает логику для удаления формы (при успешном сохранении), но это сообщение об ошибке никогда не появлялось с ней, хотя у меня нет кнопки type = 'button'.
AlanObject
3
В моем случае эта ошибка возникла на кнопке «Отмена», поэтому хорошо, что я добавил type="button":)
Маркос Лима
Я думаю, что этот ответ хорош тем, что вы должны четко указывать в своих формах, какая кнопка является кнопкой отправки. Это решает проблему использования неправильной кнопки для отправки, а также позволяет вам продолжать использовать клавишу ввода для отправки.
Джастин
84

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

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

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

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

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

<button type="button"></button>
Nour
источник
2
Я думаю, что # myForm = "ngForm" не требуется.
Heiner
Вы правы, если вам не нужна ссылка на ngForm, это не обязательно.
Нур
Это правильный способ решить эту проблему. Это избавляет от сообщения, сохраняя возможность отправки, нажав клавишу ввода.
Уильям Стивенс
это должен быть принятый ответ
nt4f04und
24

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

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

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

Darkrender
источник
6

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

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

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

Игорь Бабич
источник
Спасибо, это должен быть принятый ответ, если вы все еще хотите использовать button type = "submit" в своей форме
Fjut
4

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

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

dhilt
источник
2

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

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

И:

submitForm(event: Event) {
  event.preventDefault();
  // ...
}
Абубакар Ибрагим
источник
2
В этом ответе недостаточно подробностей. Пожалуйста, убедительно объясните, чем это решение отличается или лучше других перечисленных, поскольку в этом посте уже есть несколько решений. Пожалуйста, прочтите руководство SO перед публикацией.
свеча зажигания
1
@sparkplug don't gatekeep, этот ответ был полезен, даже если он нуждался в более подробной информации.
Уилл Шейвер
Уилл Шейвер - Может быть, полезно. Хорошо отформатирован и легко интерпретируется, не очень. Существуют стандарты, обеспечивающие легкость чтения и понимания ответов пользователю SO. Ответ @dhilt - это более подробный пример решения, которому легче следовать.
зажигания
0

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

Нир
источник
0

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

Шахид Ислам
источник
0

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

Пример:

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>
ДонДаниэль
источник
-1

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

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

Suyash Patwardhan
источник