角2：表單提交取消了，因爲形式沒有連接

我有一個包含一個形式，當模式被破壞我在控制檯中出現以下錯誤模態：角2：表單提交取消了，因爲形式沒有連接

表單提交取消了，因爲形式沒有連接

模態添加到<modal-placeholder>元件，它直接孩子<app-root>，我的最高級別的元素。

什麼是正確的方式從DOM中刪除表單並擺脫Angular 2中的這個錯誤？我目前使用componentRef.destroy();

2017-03-01 nick

可能的重複[獲取錯誤「表單提交被取消，因爲表單未連接」]（http://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-是不是連接） – Saravana

你有隱藏和顯示錶單的* ngIf嗎？ – mickdev

@mickdev no * ngIf，我像這樣'componentRef.destroy（）;'銷燬模態，我在我的問題中添加了更多細節。謝謝！ – nick

可能還有其他原因會發生這種情況，但在我的情況下，我有一個按鈕被瀏覽器解釋爲提交按鈕，因此當單擊按鈕導致錯誤時提交表單。添加type =「button」解決了問題。完整的元素：

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

來源

2017-03-30 20:43:57

我不確定爲什麼這個答案被接受，因爲在這樣做時，你失去了按Enter鍵提交表單的能力。 –

Nour的答案是最簡單的答案，並允許輸入密鑰。 – Heiner

這解決了我的問題，我正在實現一個CANCEL按鈕，通過一個* ngIf指令從表單中刪除表單。我有一個保存按鈕，觸發邏輯也刪除表單（成功保存），但這個錯誤信息從來沒有出現，即使我沒有類型='按鈕'。 – AlanObject

在您需要定義提交方法（ngSubmit）表單元素，是這樣的： <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

，並提交按鈕你忽略點擊的方法，因爲你的形式現在已連接到提交方法： <button class="btn btn-success" type="submit">Save</button>該按鈕應該是提交類型。 onSubmit(value: ICurrency) { ... } 此方法接收與從所述表單字段值的值對象：

在後面的代碼部件在實現「的onsubmit」的方法，例如這樣的事情。

來源

2017-07-22 22:40:40

謝謝，這應該是被接受的答案，如果你仍然想在表單上使用button type =「submit」 – Fjut

因此，我實際上只是遇到了同樣的問題，除了沒有涉及模態。在我的表格中，我有兩個按鈕。一個提交表單，一個單擊後返回上一頁。

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

點擊與routerLink的第一個按鈕做它應該是什麼，但顯然也試圖提交表單以及，然後不得不放棄表單提交，因爲頁面的形式是在被卸載在提交期間來自DOM。

這似乎與您發生的事情完全相同，除了使用模式而不是整個頁面。

如果您直接將第二個按鈕的類型指定爲提交以外的內容，問題就會被解決。

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

所以，如果你通過一個「取消」按鈕或類似的東西在關閉模式，指定按鈕的類型，如上圖所示，應該能夠解決您的問題。

來源

2017-07-26 16:55:42 Darkrender

在表單標籤，你應該寫：

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

，並在窗體中，你應該有提交按鈕：如果你在其他任何按鈕

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

和最重要的事情你的表單應該給它type =「button」，把它留作默認（我提交的東西）會導致警告信息。

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

來源

2017-10-19 15:17:45 Nour

我認爲＃myForm =「ngForm」不是必需的。 – Heiner

你說得對，除非你需要ngForm的引用，否則不需要。 – Nour

在情況下提交表單是伴隨着組件的破壞，將提交表單的競爭條件失敗，從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()); 
}

這應該不管按鈕類型的工作。

來源

2018-01-20 11:47:55 dhilt

角2：表單提交取消了，因爲形式沒有連接

回答

相關問題