Angular提交表单时,再次验证

本文探讨了如何在前端表单提交过程中实现实时校验、失焦校验与二次验证,确保数据准确再提交,同时提及了如何利用Promise和rxjs处理视图更新的异步操作,如二级模态窗口的数据同步验证与一级窗口视图的实时刷新。
摘要由CSDN通过智能技术生成

这两天在看别人代码时候思考, 表单校验不只需要实时校验和失焦校验。举个例子,如果使用失焦校验,当用户填完表单,直接提交,那么会触发input框的校验,但是数据可以直接传入数据库,那么对于前端来说,需要处理好提交按钮,使得表单二次校验,并且在不通过的情况下,不传入任何数据。

代码层面,可以使用循环来二次验证表单控件 xxx.controls

 //xxx是你传入的表单
 //使用循环来对表单控件修改状态,并且重新激活验证  
 for (const i in xxx.controls) {
      xxx.controls[i].markAsDirty();
      xxx.controls[i].updateValueAndValidity();
 }

 if (!xxx.valid){
    //如果不通过,就返回false
    return false
 }else{
    //如果全部验证通过,就扔到数据库里面去
 }

思考:确认提交表单的过程应该是同步的,但是在提交同时可以异步处理视图更新。举个栗子,跳出一个二级模态窗口,用户填了一个表单,那么之后一级窗口的列表应该更新了视图,新的商品信息应该出现在一级窗的list里。

这种需求,首先是在二级模态窗口,对button添加click事件,同步的验证表单,通过验证之后添加一个异步更新视图函数

在思考:一般来说promise就够用了,但是ng深度集成了RXJS,这个再去看看用法,思考一下合适的场景。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

董厂长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值