表单验证错误通过路由持续存在答案

【问题标题】：Form validation errors persist through routing表单验证错误通过路由持续存在
【发布时间】：2018-11-03 21:17:53
【问题描述】：

在我的应用程序中，我遇到了以下问题：

用户可以通过提供guests 列表的GuestManager 组件显示多个guests。如果用户单击一位客人，则会显示详细视图（CustomerEditSingleGuestComponent 组件） - 几乎是常规的主/详细视图。

detail 组件的路由是这样的：

[...]
{
  path: ':guestId',
  component: CustomerEditSingleGuestComponent,
  canDeactivate: [CanDeactivateGuard],
},
[...]

到目前为止一切顺利。 CustomerEditSingleGuestComponent 包含一个带有验证的表单，在第一次编辑来宾时可以正常工作（相对于 SPA 生命周期）。如果用户切换到另一个尚未填写的访客，所有表单输入都会立即显示其验证错误，而不是等待用户输入。

这不符合我的验证策略，因为我们打算仅在触摸 form input 后显示错误消息（对于第一个来宾编辑过程工作正常）。如果所有必填字段在打开第二个/以下guest data forms 时都标记为红色，这对用户来说似乎相当混乱。

我的假设是，当从Guest A 切换到Guest B 时，Angular 会重用该组件，因为只是路由参数发生了变化，并且应该显示相同的组件。显然form 也被保留了，我无法重置表单（值已重置，但验证错误仍会立即显示）-我尝试通过 ViewChild 访问表单并使用reset()、@987654334 @、markAsPristine() 和 markAsUntouched() 各种组合，看来我不是唯一一个：

Cleanest way to reset forms

我想过一些讨厌的解决方法（路由到父级，然后路由到下一个guestId，使用*ngIf 和setTimeout 删除表单表单DOM 并强制重新加载）。尽管如此，我仍然希望有一个体面和干净的解决方案来解决这个问题？

【问题讨论】：

你能在 stackblitz 中重现这个问题吗？

标签： javascript html angular forms

【解决方案1】：

在 Angular 中，如果组件显示在选项卡组件中，ngInit 将只被调用一次，因为出于性能原因它会缓存组件创建的东西。每次都会调用使用Router Change subscribe方法。

我们需要手动重置re-active表单，好地方是ngOnDestroy组件生命周期方法。

这里是代码

static resetForm(formGroup: FormGroup) {
    let control: AbstractControl = null;
    formGroup.reset();
    formGroup.markAsUntouched();
    Object.keys(formGroup.controls).forEach((name) => {
      control = formGroup.controls[name];
      control.setErrors(null);
    });
  }

【讨论】：