首页 文章

具有多个路径的角度形式验证

提问于
浏览
1

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

当我填写所有输入我发送数据到服务器,服务器验证我的数据,如果我的数据有错误,服务器发送到前端像 JSON,其中包含错误数组与这样的对象

{“field”:“some input”,“message”:“some error message”}

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

有什么方法可以解决这个问题吗?

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

[UPDATE]

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

<router-outlet></router-outlet>

并且为每个标签添加了**[6]指令,它是重要的**,如果添加* ngIf,那么我们就像router-outlet一样有问题,因为我们将无法访问组件* ngIf 中的条件不会为真。

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

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

2 回答

  • 0

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

    export class PaymentService {
    
        formErrors: any = {}
    
        constructor() { }
    
        setErrors(errors: any) {
            this.formErrors = errors;
        }
    
        getErrors() { 
            return this.formErrors
        }
    
     }
    
  • 0

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

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

相关问题