У меня есть модальное, который содержит форма, когда модальное разрушается, я получаю следующую ошибку в консоли:
форма представления отменили, потому что форма не связана
Модальное добавляется в <модально-заполнитель>
элемент, который является прямым потомком к <приложение-Root>
, мой высшем уровне элемента.
Что'ы правильный способ снятия формы с дом и как избавиться от этой ошибки в угловых 2? В настоящее время я использую componentRef.уничтожить();`
Там могут быть и другие причины, это происходит, но в моем случае у меня была кнопка, которая интерпретируется браузером как кнопку "Отправить" и, следовательно, форма была представлена, когда кнопка была нажата вызывает ошибку. Добавление тип="и кнопка" и исправили проблему. Полный элемент:
<button type="button" (click)="submitForm()">
В теге форме вы должны написать следующее:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
а в форме вы должны иметь кнопку "Отправить":
<button type="submit"></button>
И самое главное, если у вас есть любые другие кнопки в форме вы должны добавить тип="и кнопка"
в них. Оставив атрибута по умолчанию тип
(который я думаю, отправить
) вызовет предупреждение.
<button type="button"></button>
Так я собственно только что столкнулся с точно такой же проблемой сегодня, за исключением без непосредственного участия модала. В моей форме, у меня есть две кнопки. Одна, которая отправляет форму и, при нажатии, маршруты обратно на предыдущую страницу.
<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
Нажав на первую кнопку с routerLink делает именно то, что надо, но тоже видимо пытается отправить форму, и тогда отказаться от отправки формы, потому что страница, что форма была демонтирована с дом во время представления.
Это, кажется, то же самое, что с вами происходит, кроме как модальное, а не всю страницу.
Проблема будет исправлена, если вы непосредственно указать тип вторая кнопка будет нечто иное, чем представить.
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>
Так что если вы не закрытия модального через 'отмена' кнопка или что-то подобного, указав, что кнопка's типа, как показано выше, должно решить вашу проблему.
В форме элемента необходимо определить метод отправки (ngSubmit), что-то вроде:
в <форме ID="в валюте-редактировать" и (ngSubmit)=с"onSubmit(Ф.значения)" и #ф="и ngForm" и>
и на кнопку Отправить вы опускаете выберите способ, потому что ваша форма сейчас подключен к представить метод: в `<класс button="и БТН БТН-успеха" типа=на"Отправить" и>сохранить</кнопку> кнопка должна подавать вида.
В код компонента реализации и"onSubmit" и способ, например что-то вроде этого:
onSubmit(значение: ICurrency) {
...
}
Этот метод получает объект значения из полей формы.
В случае, если подача заявки сопровождается компонент'ы уничтожая, представившего форма не в состоянии наперегонки с отрыв формы от Дом. Скажем, у нас есть
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
);
}
Если вам нужно сразу отказаться от Форма, нулевой задержки подхода также должны работать. Это гарантирует отряд дом, чтобы быть в следующем цикле после отправки формы была вызвана:
submitForm() {
this.saveData();
setTimeout(() => this.abandonForm());
}
Это должно работать независимо от типа кнопки.
Я недавно эту проблему и событие.метод preventDefault()` работал для меня. Добавить его в событие click метод.
в <кнопка типа=на"Отправить" и (нажать)="в submitForm ($) событие" и мат-рейз-кнопка>сохранить< кнопка/>
submitForm(событий: Event) { событие.метод preventDefault(); ... }
у меня это предупреждение, я изменил тип кнопки на "Отправить" до "и кнопка" и проблема решена.