角度2：フォームは

Question

に接続されていないため、キャンセルフォームの提出モーダルが、私は、コンソールで次のエラーを取得するに破壊されたとき、私は、フォームを含むモーダルを持っています。フォームのでキャンセル

フォームの提出モーダルが<app-root>への直接の子である<modal-placeholder>要素、私のトップレベルの要素に追加され

に接続されていません。

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

Answer 1

私の場合、私はボタンがブラウザによって送信ボタンとして解釈されていたので、ボタンがクリックされてエラーが発生したときにフォームが送信されました。 type = "button"を追加すると問題が解決しました。全要素：あなたがメソッドを提出定義する必要があり、フォーム要素（ngSubmit）で

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

Answer 2

、のようなもの： <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

とフォームが今に接続されているので、あなたは、メソッドをクリック省略送信ボタン上送信方法： <button class="btn btn-success" type="submit">Save</button>ボタンは送信タイプである必要があります。あなたは「onSubmit検証」メソッドを実装するコンポーネントの背後にあるコードで

は、例えばこのような何か： onSubmit(value: ICurrency) { ... } このメソッドは、フォームフィールドの値を持つ値オブジェクトを受信して​​います。

Answer 3

私は実際には、モーダルが関与していない場合を除いて、まったく同じ問題に直面しました。私のフォームには、2つのボタンがあります。 1つはフォームを送信し、もう1つはクリックすると前のページに戻ります。 routerLinkとの最初のボタンの

<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> 

は、あなたの問題を解決する必要があります。

あなたは次のことを書くべきformタグで

Answer 4

：

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

とフォーム内には、ボタンを提出している必要があります。

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

、最も重要なことはあなたが他のボタンを使用している場合あなたのフォームはタイプ= "ボタン"を与える必要があります、私はものが提出されている）デフォルトのままにして、警告メッセージが表示されます。フォーム部品の破壊を伴うされている提出し、フォームの提出は、DOMからフォームの離脱と競合状態に失敗した場合には

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

Answer 5

。 、あなたはすぐにフォームを放棄する必要がある場合は

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

：我々は

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

saveDataた場合は、非同期（例えば、それはAPI呼び出しを介してデータを保存し）、その後、我々は結果を待つことである持っている、と言いますゼロ遅延アプローチも機能するはずです。これにより、フォームの送信が呼び出された後に次のイベントループにDOM分離が行われることが保証されます。

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

これはボタンの種類に関係なく機能します。