Question

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

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

详细信息组件的路由如下所示：

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

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

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

我的假设是，当从Guest A切换到Guest B时，Angular会重用该组件，因为仅更改了路径参数，因此应显示相同的组件。显然form仍然存在，并且我无法重置表单（重置了值，但是仍然会立即显示验证错误）-我尝试通过ViewChild访问表单并使用{{1} }，reset()，resetForm()和markAsPristine()的各种组合，看来我并不是唯一的人：

Cleanest way to reset forms

我考虑过讨厌的解决方法（使用markAsUntouched()和guestId删除DOM表单并强制重新加载，然后路由到父节点，然后路由到下一个*ngIf）。不过，我仍然希望有一个体面且干净的解决方案？

Answer 1

在Angular中，如果组件显示在“选项卡组件”中，则ngInit将仅被调用一次，因为出于性能原因它将缓存组件创建内容。每次都会使用“ Router Change”订阅方法被调用。

我们需要手动重置反应形式，好的地方是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);
    });
  }

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

1 个答案: