Question

在Angular 6中，我有一个表单，其中数据通过异步管道来自Observable：

<div class="header">
  <button (click)="leave()">Leave</button>
</div>
<div *ngIf="car$ | async as car">
  <form #form="ngForm" (ngSubmit)="onSubmit(car)">
    <label>Make: <input type="text" name="make" [(ngModel)]="car.make"></label>
    <label>Model: <input type="text" name="model" [(ngModel)]="car.model"></label>
    <button type="submit">Submit</button>
  </form>
</div>

在调用控制器的onSubmit()函数时，我提供了局部变量car作为参数。通过这种方式，我可以获得实际值，并且可以例如通过Web服务来更新数据存储。

我也有一个canDeactivate()后卫。如果用户例如通过“离开”按钮离开页面，我想检查表单中的数据是否已更改。

我知道我可以使用以下代码检查表单是否脏了：

@ViewChild('form') form: NgForm;
...
canDeactivate() {
  if (this.form.dirty) { ... }
}

如果用户输入或删除一些文本，则dirty将是true。但这并不意味着实际值与原始值不同。

要确定值是否实际更改，我想将实际值与原始值进行比较。我可以通过tap()将原始值存储到Observable中。但是，如何访问canDeactivate中的实际值？

也许还有其他解决方案？

角度6：检测具有异步管道的表单是否发生实际更改

0 个答案: