保存數據后不會清除Angular2單向綁定表單

Question

我有一種形式，其中輸入綁定到對象的單向方式。

<input type="text" name="lastName" #lastName="ngModel" [ngModel]="selectedPers.lastName" required minlength="2">

保存表單時，我讀取表單數據並將其發送到服務器，然后使用虛擬/空數據更新我的模型以將其清除。

this.peopleListObservable.push(newPersonFormData).then(a => {
        this.clearPers();
      })


  clearPers() {    
    this.selectedPers = this.dummyPers;
    this.isPersAdd = true;
  }

此清除方法是單獨的，並且當我通過單擊按鈕調用它時可以使用，但是如果我將數據發送到保存承諾then方法中的服務器后調用，它將無法使用/清除表格。 為什么我會遇到這種行為，我應該怎么做才能清除表格？

編輯：我已經更改了clearPers函數，希望重新加載頁面：

  clearPers() {    
    console.log('Inside clearPers function');
   this.router.navigate(['/person/' + this.key]);
  }

猜猜是什么，控制台日志已打印，但路由器導航未發生。

我想念什么？

編輯2：感謝@FabioAntunes提醒我路由器的想法永遠無法正常工作。

編輯3：對於使用Angular 2 RC4版本的項目，提出了問題。 請在下面閱讀我的答案，以了解以后發生的事情以及應該在Angular2的最終版本中發生的事情。

Answer 1

Angular2 Forms還沒有reset選項，如果您閱讀了Forms的文檔 ，它們會為您提供臨時修復。

通過反思，我們意識到Angular無法區分以編程方式替換整個英雄和清除name屬性。 Angular不做任何假設，並將控件置於當前的臟狀態。

只需在組件的類中添加一個active屬性，然后在窗體上添加一個ngIf ：

<form *ngIf="active">

然后在您的功能：

clearPers() {    
  this.selectedPers = this.dummyPers;
  this.isPersAdd = true;
  this.active = false;
  setTimeout(() => this.active = true, 0);
}

setTimeout位是臨時修復：

這是我們等待適當的表單重置功能時的臨時解決方法。

Answer 2

我認為您的語法有點差。 您沒有使用輸入語法進行單向或雙向數據綁定。 嘗試執行以下兩種方式進行數據綁定：

<input type="text" name="lastName" [(ngModel)]="selectedPers.lastName" required minlength="2">

另外，您不需要此：＃lastName =“ ngModel”

如果要以一種方式進行數據綁定（不能用來清除控件），請使用以下方法：

<input type="text" name="lastName" [value]="selectedPers.lastName" required minlength="2">

Answer 3

在使用了Fabio答案中描述的方法之后，我決定回到最初的想法，使用路由參數刷新我的組件，從而刷新我的表單。 使用* ngIf重新創建表單似乎是合乎邏輯的，因為我們目前還沒有一種自然的方式來重置表單（Angular2的RC4），但是由於某種原因，超時后的重新創建會刷新組件中的整個頁面。 我不想花費更多的時間來解決一個不太自然的解決方案。

在Stackoverflow中尋找其他答案時，我在Submit之后遇到了在Angular 2中重置表單的問題 。

來自@ angular-university和@ jp-att的答案表明RC5具有修復程序form.reset（）方法。 不幸的是，我現在不能立即將我的項目移植到RC5。

因此，我回到了最初的想法（直到將我的應用移植到RC5 / final），然后使用路由刷新組件。

首先，我嘗試使用查詢參數

this.router.navigate(['person/' + this.idKey],{ queryParams: { timestamp: nowTimeNumber}});

那沒有幫助，可能是由於相同的原因，它也沒有使用未綁定到組件中任何模型的route參數，這無濟於事：如果更改不影響組件，則Angular的更改檢測不會觸發組件的刷新任何東西（至少這是我的猜測）。 此外，查詢參數對於url來說很粘，僅是刷新技巧而非常難看。

所以我這樣做：我創建了一條新的子路線

{ path: 'person/:personid', component: PersonEditComponent},
{ path: 'person/:personid/:timestamp', component: PersonEditComponent}

讀取（觀察）時間戳，並在需要清除表單數據時來回移動：

  clearPersonDataRouted(){
    let newTime = moment().unix();
    if(this.timeRouteParam)
    this.router.navigate(['person/'+ this.idKey]);
    else
    this.router.navigate(['person/'+ this.idKey + '/' + newTime]);
  }