フォームを含むモーダルがあるのですが、モーダルが破棄されると、コンソールに以下のエラーが表示されます:
フォームが接続されていないため、フォーム送信はキャンセルされました。
モーダルは、トップレベル要素である <app-root>
の直接の子である <modal-placeholder>
要素に追加されています。
Angular 2でDOMからフォームを削除し、このエラーを解消する正しい方法は何ですか?私は現在、componentRef.destroy();
を使っています。
フォームタグには、次のように記述する必要があります。
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
フォームの内側に送信ボタンが必要です。
<button type="submit"></button>
そして最も重要なのは、フォームに他のボタンがある場合は、それらに「type = "button"」を追加することです。 デフォルトの type
属性を残します。
(「送信」だと思います)警告メッセージが表示されます。
<button type="button"></button>
実は今日、全く同じ問題に遭遇したのですが、モーダルが絡んでいないだけでした。私のフォームには、2つのボタンがあります。1つはフォームを送信するボタンで、もう1つはクリックすると前のページに戻るボタンです。
<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
ルータリンクを持つ最初のボタンをクリックすると、その通りに動作しますが、明らかにフォームを送信しようとし、送信中にフォームがあったページが DOM からアンマウントされたため、フォーム送信を放棄する必要があります。
これは、ページ全体ではなくモーダルを除いて、あなたに起きていることとまったく同じように見えます。
この問題は、2 番目のボタンの種類を直接 submit 以外に指定すると解決します。
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>
つまり、モーダルを 'Cancel' ボタンなどで閉じている場合は、上記のようにボタンの種類を指定することで問題が解決するはずです。
form要素にsubmitメソッド(ngSubmit)を定義する必要があり、以下のようになります: form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">` のように。
そして、送信ボタンでは、フォームがsubmitメソッドに接続されたので、clickメソッドを省略します:
<button class="btn btn-success" type="submit">Save</button>
ボタンは 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(); . ... }。
。