Question

如何为多条路线进行Angular表格验证？例如，我有一个大的表单，它包含几个部分，如选项卡，我可以随时导航到它们。我使用rooting来进行导航。例如。我有模板，其中包括大约5个标签。

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

{＆＃34; field＆＃34;：＆＃34; some input＆＃34;，＆＃34; message＆＃34;：＆＃34; some error message＆＃34;}

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

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

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

[UPDATE]

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

<router-outlet></router-outlet>

并为每个标签添加 [隐藏] 指令，重要，如果添加* ngIf，那么我们遇到与路由器插座相同的问题，因为我们无法访问组件，而* ngIf中的条件不会为真。

我为每个选项卡创建了包含常量的javascript类，并将activeTab属性添加到根组件表单中，并在单击选项卡时更改activeTab，并显示此选项卡的表单。

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

Answer 1

订阅主题。但在这种情况下你需要这个吗？如果您更改标签，请重新启动您的组件。你应该在加载组件时保存CommonService中的所有ur错误和Service中的reed错误。

export class PaymentService {

    formErrors: any = {}

    constructor() { }

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

    getErrors() { 
        return this.formErrors
    }

 }

Answer 2

我正在考虑一个实现，我在Angular和服务器上有模型对象，比如由制表符分隔。例如我有一个根模型对象，它包含每个选项卡中的模型对象。当我填充一个选项卡并将我的模型发送到服务器时，服务器会给我一个错误对象，其中包含带有错误和字段的选项卡的名称。当我从服务器得到答案时，我会看到错误选项卡的名称，之后我会突出显示此选项卡，我将保存服务中的所有错误 Alex Kvitchastiy 建议的方式。当我将导航到tab时，我将使用AfterViewInit挂钩并从常用服务获取此选项卡的错误，如果它有错误，我将把它应用于选项卡的控件。

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

具有多个路径的角度表单验证

2 个答案: