这两天在看别人代码时候思考, 表单校验不只需要实时校验和失焦校验。举个例子,如果使用失焦校验,当用户填完表单,直接提交,那么会触发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,这个再去看看用法,思考一下合适的场景。