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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

Ответ 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>

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

Ответ 4

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

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

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

Ответ 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 является асинхронным (например, он сохраняет данные через вызов API), мы можем дождаться результата:

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

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

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

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

Ответ 6

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

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

submitForm(event: Event) { event.preventDefault();... }

Ответ 7

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

Ответ 8

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