Angular 2:フォームが接続されていないため、フォームの送信がキャンセルされました


82

フォームを含むモーダルがあります。モーダルが破棄されると、コンソールに次のエラーが表示されます。

フォームが接続されていないため、フォームの送信がキャンセルされました

モーダルは、私の最上位<modal-placeholder>要素である、の直接の子である要素に追加され<app-root>ます。

DOMからフォームを削除し、Angular 2でこのエラーを取り除く正しい方法は何ですか?私は現在使用していますcomponentRef.destroy();



フォームを非表示にして表示する* ngIfはありましたか?
mickdev 2017年

@mickdev no * ngIf、このようにモーダルを破棄しcomponentRef.destroy();ます。質問に詳細を追加しました。ありがとう!
ニック2017年

2
@mickdev * ngifを使用してフォームを表示および非表示にした場合の対処方法
Jun711 2018

回答:


179

これが発生する他の理由があるかもしれませんが、私の場合、ブラウザによって送信ボタンとして解釈されるボタンがあったため、ボタンがクリックされたときにフォームが送信され、エラーが発生しました。type = "button"を追加すると、問題が修正されました。完全な要素:

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

33
この回答が受け入れられた理由はわかりません。これを行うと、Enterキーを押してフォームを送信できなくなるためです。
Peter LaBanca 2017

7
Nourによる答えは最も単純なものであり、Enterキーを使用できます。
ハイナー2017年

2
これにより、* ngIfディレクティブを介してページからフォームを削除するフォームにCANCELボタンを実装していた問題が修正されました。フォームを削除するロジックをトリガーするSAVEボタンがあります(保存が成功した場合)が、type = 'button'がなくても、このエラーメッセージは表示されません。
AlanObject 2018

3
私の場合、このエラーは、それがあるので、良い私が追加、[キャンセル]ボタンの上に発生していたtype="button":)
マルコスリマ

この回答は、どのボタンが送信ボタンであるかをフォームで明示する必要があるという点で良いと思います。これにより、送信に間違ったボタンが使用されるというこの問題が解決されるだけでなく、送信にEnterキーを引き続き使用できるようになります。
ジャスティン

80

フォームタグには、次のように記述します。

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

フォーム内に送信ボタンが必要です。

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

そして最も重要なことは、フォームに他のボタンがある場合はtype="button"、それらに追加する必要があります。デフォルトのtype属性(私が思うにsubmit)をそのままにしておくと、警告メッセージが表示されます。

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

2
#myForm = "ngForm"は必要ないと思います。
ハイナー2017年

ngFormへの参照が必要でない限り、その通りです。
2017年

これはそれを解決する正しい方法です。これにより、Enterキーを押して送信する機能を維持しながら、メッセージが削除されます。
ウィリアムスティーブンス

24

だから私は実際にモーダルが関与していないことを除いて、今日まったく同じ問題に遭遇しました。私のフォームには、2つのボタンがあります。フォームを送信するものと、クリックすると前のページに戻るものです。

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

routerLinkで最初のボタンをクリックすると、想定どおりに動作しますが、フォームの送信も試行されるようです。送信中にフォームが表示されていたページがDOMからマウント解除されるため、フォームの送信を中止する必要があります。

これは、ページ全体ではなくモーダルを使用することを除いて、あなたに起こっていることとまったく同じように見えます。

2番目のボタンのタイプを送信以外のものに直接指定すると、問題は修正されます。

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

したがって、「キャンセル」ボタンなどを使用してモーダルを閉じる場合は、上記のようにそのボタンのタイプを指定すると、問題が解決するはずです。


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) { ... } このメソッドは、フォームフィールドから値を持つ値オブジェクトを受け取ります。


おかげで、フォームでボタンtype = "submit"を引き続き使用したい場合は、これが受け入れられる回答になるはずです
Fjut 2017年

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());
}

これは、ボタンのタイプに関係なく機能するはずです。


2

私は最近この問題を抱えていてevent.preventDefault()、私のために働きました。クリックイベントメソッドに追加します。

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

そして:

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

2
この答えには十分な詳細がありません。この投稿にはすでにいくつかの解決策があるため、この解決策がリストされている他の解決策とどのように異なるか、または優れているかを説得力を持って説明してください。投稿する前にSOガイドラインをお読みください。
スパークプラグ2018

1
@sparkplugはゲートキーピングを行わないでください。詳細が必要な場合でも、この回答は役に立ちました。
シェーバーは

シェーバーになります-便利かもしれません。適切にフォーマットされ、解釈が簡単ですが、それほど多くはありません。SOユーザーが読みやすく理解しやすいように、標準が用意されています。@dhiltによる回答は、より詳細に理解しやすいソリューションの例です。
スパークプラグ

0

これは、送信ボタンがまったくない場合でも、Angular6で確認できます。同じテンプレートに複数のフォームがある場合に発生します。解決策があるかどうか/解決策が何であるかわからない。



0

それでもボタンの機能を「送信」タイプに維持したい場合は、そのボタンでクリックイベントを使用しないでください。代わりに、フォームでngSubmitイベントを使用する必要があります。

例:

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

-1

フォーム送信で他のページにルーティングしている可能性があります。次の例のようrouterlinkに、テンプレートに渡すのではなく、プログラムによるルートナビゲーションを使用します。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.