具有多个路由的 Angular 表单验证答案

【问题标题】：Angular Form Validations with multiple Routes具有多个路由的 Angular 表单验证
【发布时间】：2018-02-18 15:39:16
【问题描述】：

如何对多个路由进行 Angular 表单验证？例如，我有一个大表单，它包含几个部分，如选项卡，我可以随时导航到它们。我使用生根来进行类似的导航。例如。我有模板，其中包括大约 5 个选项卡。

当我填写所有输入时，我将数据发送到服务器，服务器会验证我的数据，如果我的数据有错误，服务器会将其发送到前端，如 JSON，其中包含带有此类对象的错误数组

{"field": "一些输入", "message": "一些错误信息"}

我解析这个答案，并通过字段值从表单中搜索表单控件，并添加错误消息。但是对于一个选项卡，我可以做到这一点，因为在某一时刻我只有一个选项卡的活动路线，而且我只有这个选项卡的表单控件，但是我如何在后台加载其他选项卡并获取它们的表单控件，并为他们设置错误信息？

有没有办法解决这个问题？

我试图在互联网上找到答案，但找不到任何具体的答案。我只找到一篇文章http://heidloff.net/article/angular-2-form-redux-multiple-routes有同样的问题，但真的没有其他选择，只有如何使用Redux？

[更新]

我解决了我的问题。我从表单中删除了选项卡路由，并在根表单组件中添加了选项卡的所有组件，早期是

<router-outlet></router-outlet>

并在每个选项卡中添加[hidden]指令，这是重要，如果添加*ngIf，那么我们会遇到与router-outlet相同的问题，因为当 *ngIf 中的条件不成立时，我们将无法访问组件。

我为每个选项卡制作了带有常量的 javascript 类，并将 activeTab 属性添加到根组件表单中，当单击选项卡时我更改了 activeTab，并显示了该选项卡的表单。

通过这种方式，我可以访问所有选项卡组件，当我向服务器发出请求时，服务器返回给我错误的响应，我可以在根表单组件中处理它并应用于子表单组件

【问题讨论】：

标签： angular validation angular2-forms

【解决方案1】：

订阅主题。但是在什么情况下你需要这个？如果您更改选项卡，则重新初始化您的组件。加载组件时，您应该将所有错误保存在 CommonService 中并从 Service 中读取错误。

export class PaymentService {

    formErrors: any = {}

    constructor() { }

    setErrors(errors: any) {
        this.formErrors = errors;
    }

    getErrors() { 
        return this.formErrors
    }

 }

【讨论】：

Alex，当我打开我的第一个选项卡并单击按钮时，我需要它，它会保存所有选项卡的形式。而且我应该给出错误，因为我没有填写其他选项卡上的所有必填字段，并且我想突出显示有错误的选项卡，当我导航到此选项卡时，我想查看无效字段下方的所有验证消息。另一种情况是，当我填写所有选项卡并将表单发送到服务器时，当服务器返回带有错误的答案（例如包含字段名称和错误消息的对象）时，我需要将此消息应用于字段并突出显示有错误的选项卡.

【解决方案2】：

我正在考虑一种实现，我在 Angular 和服务器上都有模型对象，就像用制表符分隔一样。例如我有一个根模型对象，它包含来自每个选项卡的模型对象。当我填写一个选项卡并将我的模型发送到服务器时，服务器会给我一个错误对象，其中将包含一个带有错误和字段的选项卡名称。当我从服务器得到答案时，我会看到有错误的选项卡名称，然后我将突出显示此选项卡，然后我将保存服务中的所有错误 Alex Kvitchastiy 是如何建议的。当我导航到选项卡时，我将使用 AfterViewInit 钩子并从公共服务中获取此选项卡的错误，如果有错误，我会将其应用于选项卡的控件。

但是这个实现有一个问题。如果我想禁用在未填写所有必填字段时保存表单的按钮？如果我位于一个选项卡中并且可以访问一个选项卡的表单控件，我不明白我该怎么做，因为其他选项卡中的其他控件没有被加载。

【讨论】：