angular嵌套校验

最近的angular项目中用到了复杂的表单校验，一个表单中既有普通FormControl，还加入了FormArray和FormGroup，例如：

validateForm: FormGroup = this.fb.group({
    name: [null, [Validators.required]], 
    phone: [null, [Validators.required]],
    timer: this.fb.array([
        day:[null,Validators.required],
        time:[null,Validators.required]
    ]), 
});

这个时候直接使用表单校验，会校验不到的FormArray和FormGroup的内容，需要设计一个校验函数递归遍历表单结构校验。

1. 核心目的
   递归遍历表单结构，检查每个FormControl的有效性。若控件invalid，则标记为touched和dirty，并强制更新其验证状态，以便在页面中显示错误信息。
2. 适用场景
   通常在表单提交时调用此函数，确保所有字段的验证错误都能正确显示，即使用户未主动交互。

// 对formControl进行校验，对formGroup的嵌套进行处理
export const formValid = (item: FormArray | FormGroup | FormControl): void => {
    if (item instanceof FormGroup) {
        Object.values(item.controls).forEach((e: FormControl) => formValid(e));
    } else if (item instanceof FormArray) {
        item.controls.forEach((e: FormControl) => formValid(e));
    } else if (item instanceof FormControl) {
        if (item.invalid) {
            item.markAsTouched();
            item.markAsDirty();
            item.updateValueAndValidity();
        }
    }
};

● markAsTouched()：标记为“已触摸”，触发UI错误显示。
● markAsDirty()：标记为“已修改”，表示用户已交互。
● updateValueAndValidity()：强制重新计算控件的值和验证状态，确保最新状态生效。