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

这个清除方法是独立的，当我通过点击按钮调用它时可以工作，但是如果我在保存承诺中将数据发送到服务器之后调用它，它就不会工作/清除表单{{1} } 方法。任何想法为什么我会遇到这种行为，我该怎么做才能清除我的表格？

编辑：我已经改变了clearPers函数，希望重新加载页面：

then

猜猜是什么，控制台日志打印但路由器导航没有发生。

我错过了什么？

编辑2：感谢@FabioAntunes提醒我路由器的想法无论如何都不会起作用。

编辑3：询问Angular 2 RC4发布项目的问题。请阅读下面我对以后发生的事情的回答，并且应该发生在Angular2的最终版本中。

Answer 1

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

经过反思，我们意识到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 =＆＃34; ngModel＆＃34;

如果您想以单向方式进行数据绑定（您无法使用它来清除控件），请使用此方法：

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

Answer 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]);
  }

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

3 个答案: