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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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

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

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

Answer 4

В элементе формы вам нужно определить метод 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) {...}Этот метод получает объект значения со значениями из полей формы.

Answer 5

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

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

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

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

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

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

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

Answer 6

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

Answer 7

I resolved the issue by adding the attribute type = "button".

      <button type="button" onClick={props.formHandler}>Cancel</button>

Answer 8

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

Пример:

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

Answer 9

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

Answer 10

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

Answer 11

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

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