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

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

フォームタグには、次のように記述する必要があります。

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

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

実は今日、全く同じ問題に遭遇したのですが、モーダルが絡んでいないだけでした。私のフォームには、2つのボタンがあります。1つはフォームを送信するボタンで、もう1つはクリックすると前のページに戻るボタンです。

Cancel
Submit

ルータリンクを持つ最初のボタンをクリックすると、その通りに動作しますが、明らかにフォームを送信しようとし、送信中にフォームがあったページが DOM からアンマウントされたため、フォーム送信を放棄する必要があります。

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

この問題は、2 番目のボタンの種類を直接 submit 以外に指定すると解決します。

Cancel

つまり、モーダルを 'Cancel' ボタンなどで閉じている場合は、上記のようにボタンの種類を指定することで問題が解決するはずです。

form要素にsubmitメソッド(ngSubmit)を定義する必要があり、以下のようになります： form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">` のように。

そして、送信ボタンでは、フォームがsubmitメソッドに接続されたので、clickメソッドを省略します： Save ボタンは submit タイプである必要があります。

コンポーネントの後ろのコードでは、例えば以下のようにquot;onSubmit"メソッドを実装します： onSubmit(value:ICurrency){」です。 ... }` このメソッドは、フォーム・フィールドから値を含むvalueオブジェクトを受け取ります。

フォームの送信にコンポーネントの破壊が伴う場合、フォームの送信はDOMからのフォームの分離によりレース状態で失敗します。言ってやるがいい。

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

saveDataがasyncの場合(たとえば、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.preventDefault(); . ... }。 。

これはAngular 6で見られますが、送信ボタンがまったくありません。 同じテンプレートに複数のフォームがある場合に発生します。 ソリューションがあるかどうか/ソリューションが何であるかわかりません。

この警告があり、ボタンタイプ「送信」を「ボタン」に変更して問題を解決しました。