web-dev-qa-db-ja.com

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

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

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

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

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

javascripthtmlangularformsangular-forms
55
nick

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

    <button type="button" (click)="submitForm()">
125
Erik Lindblad

Formタグでは、次のように記述します。

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

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

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

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

<button type="button"></button>
49
Nour

モーダルが関与していないことを除けば、実際に今日はまったく同じ問題に実際に遭遇しました。私のフォームには、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>

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

18
Darkrender

フォーム要素では、次のような送信メソッド（ngSubmit）を定義する必要があります：<form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

送信ボタンでは、フォームが送信メソッドに接続されているため、クリックメソッドを省略します。<button class="btn btn-success" type="submit">Save</button>ボタンは送信タイプである必要があります。

コンポーネントの背後にあるコードでは、たとえば次のような「onSubmit」メソッドを実装します。onSubmit(value: ICurrency) {...}このメソッドは、フォームフィールドから値を持つ値オブジェクトを受け取ります。

5
Igor Babic

フォームの送信にコンポーネントの破棄が伴う場合、フォームの送信は、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());
}

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

4
dhilt

最近この問題が発生し、event.preventDefault()が機能しました。クリックイベントメソッドに追加します。

0
Abubakar Ibrahim

この警告が出ました。ボタンの種類を「送信」から「ボタン」に変更しました。問題は解決しました。

0
Shahid Islam

これはAngular 6にあり、送信ボタンがまったくなくても表示されます。同じテンプレートに複数のフォームがある場合に発生します。解決策があるかどうか/解決策が何かはわかりません。

0
Nir