Angular2单向绑定表单在数据保存后不会被清除答案

【问题标题】：Angular2 One-way binding form doesn't get cleared after data saveAngular2单向绑定表单在数据保存后不会被清除
【发布时间】：2016-12-30 12:50:08
【问题描述】：

我有一个表单，其中输入单向绑定到对象。

<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 的最终版本中发生。

【问题讨论】：

为什么不使用双向绑定？
路由器不会做任何事情，因为它已经在页面上
@FabioAntunes 感谢您的警告。
@MrF 这样做最终会在我输入这些输入时实时更新同一页面上的所有引用。我只想在首次加载（或选择）时加载它们的值。

标签： angular typescript angular2-template angular2-forms

【解决方案1】：

Angular2 表单还没有重置选项，如果您阅读了表单的 documentation，它们会为您提供临时修复。

经过反思，我们意识到 Angular 无法区分替换整个 hero 和以编程方式清除 name 属性。 Angular 不做任何假设，让控件处于当前的脏状态。

只需将active 属性添加到组件的类中，然后在表单上添加ngIf：

<form *ngIf="active">

然后在你的功能上：

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

setTimeout 位是临时修复：

这是一个临时解决方法，我们正在等待适当的表单重置功能。

【讨论】：

它倾向于在 setTimeout 时刷新整个页面，这是我不想要的。

【解决方案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">

【讨论】：

#lastName="ngModel" 部分用于验证。我现在正在检查您的其他建议。
它的工作原理是这样的：（在包含输入的 div 中，引导）<div class="form-group" [class.has-error]="!lastName.valid">
如果您删除 ="ngModel" 部分，它将无法正常工作。忽略原始状态。

【解决方案3】：

在使用 Fabio 的回答中描述的方法后，我决定回到我最初的想法，使用路由参数来刷新我的组件，从而刷新我的表单。使用 *ngIf 重新创建表单似乎是合乎逻辑的，因为我们目前（Angular2 的 RC4）没有重置表单的自然方式，但是由于某种原因，超时后重新创建导致刷新我的组件中的整个页面。我不想花更多时间来修复一个感觉不太自然的解决方案。

在 Stackoverflow 中寻找其他答案时，我遇到了 Resetting a form in Angular 2 after submit。

@angular-university 和@jp-att 的回答表明 RC5 有一个修复方法 form.reset() 。不幸的是，我现在无法立即将我的项目移植到 RC5。

所以我又回到了我最初的想法（直到我将我的应用程序移植到 RC5/final），使用路由来刷新组件。

首先我尝试使用查询参数，

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

这无济于事，可能是因为同样的原因，使用未绑定到组件中任何模型的路由参数也无济于事：如果该更改没有触发，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]);
  }

【讨论】：