У меня есть модальное окно, содержащее форму, при уничтожении модального окна в консоли появляется следующая ошибка:
Отправка формы отменена, потому что форма не подключена
Модальное окно добавляется к <modal-placeholder>
элементу, который является прямым потомком <app-root>
моего элемента верхнего уровня.
Как правильно удалить форму из DOM и избавиться от этой ошибки в Angular 2? Я сейчас используюcomponentRef.destroy();
componentRef.destroy();
, я добавил больше деталей к своему вопросу. Благодаря!Ответы:
Могут быть и другие причины, по которым это происходит, но в моем случае у меня была кнопка, которая интерпретировалась браузером как кнопка отправки, и, следовательно, форма была отправлена, когда была нажата кнопка, вызвавшая ошибку. Добавление type = "button" устранило проблему. Полный элемент:
<button type="button" (click)="submitForm()">
источник
type="button"
:)В теге формы вы должны написать следующее:
<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'])
источник