Angular 8跨组件调用markAsTouched未触发reactive forms自定义错误提示

这类跨组件操作Reactive Form的场景，出现“部分页面正常、同逻辑部分页面失效、之前正常突然异常”的表现，优先按以下顺序排查：

• 校验跨组件获取的表单实例是否一致
  你通过static: false的ViewChild拿到子组件暴露的表单对象时，要确认这个实例和子组件模板上通过[formGroup]绑定到<form>标签的实例是同一个。
  最常见的触发场景是：子组件存在异步逻辑（比如接口拉取表单配置、动态回显数据），拿到数据后重新初始化了新的FormGroup实例并绑定到模板，但父组件持有的还是初始化阶段创建的旧实例——你在旧实例上调用markAsTouched，模板上绑定的新实例根本没收到状态变更，自然不会触发错误提示的渲染判断。
  快速验证方式：在子组件的错误提示DOM块上临时输出当前绑定控件的touched状态，和父组件拿到的控件touched值做对比，数值不一致就说明是实例不匹配的问题。
• 排查错误提示的外层渲染条件阻断
  绝大多数人写错误提示时，都会加*ngIf="control.invalid && control.touched"的判断逻辑，但要检查这个DOM块的外层是否存在其他绑定的*ngIf条件。
  比如外层加了*ngIf="isFormRendered"的判断，如果页面状态异常导致这个值为false，就算控件的touched状态已经更新，承载错误提示的DOM根本没有渲染，自然看不到提示。这种场景下就会出现同类页面表现不一致的情况：不同页面的isFormRendered标记赋值时机不同，有的早于提交逻辑触发，有的晚于提交逻辑，就会有的页面正常有的异常。
• 排查Angular变更检测上下文断裂的问题
  跨组件操作表单状态时，如果调用markAsTouched的逻辑运行在Angular的Zone上下文之外（比如第三方库的原生事件回调、脱离Zone的setTimeout异步逻辑、WebSocket消息回调没有被Zone拦截），就算你把控件的touched属性修改为true，Angular也不会触发模板的重新渲染，错误提示就不会更新。
  这类问题往往是某次代码提交后突然出现的——比如最近引入的第三方库修改了Zone的运行范围，或者删掉了原本包裹在NgZone.run里的逻辑，导致部分页面的回调跳出了变更检测范围。
  快速验证方式：在父组件注入ChangeDetectorRef，在调用完所有markAsTouched的逻辑后，手动执行cdr.detectChanges()，如果此时错误提示正常显示，就可以确认是变更检测的问题。
• 排查表单状态的覆盖逻辑
  检查是否存在控件的valueChanges订阅逻辑：在你调用markAsTouched之后，订阅流触发时手动执行了control.markAsUntouched()的重置操作。
  这类埋在订阅流里的逻辑很容易被忽略，因为执行顺序的差异，就会出现：部分页面的订阅逻辑执行晚于提交时的状态设置，提示正常显示；部分页面的订阅逻辑执行早于状态重置，提示被覆盖。

内容的提问来源于stack exchange，提问作者AShkANRed