Angular8打开表单错误对话框报dialogData is undefined如何解决？

你遇到的报错来自两个核心错误：

• dialogData声明在表单控件遍历的forEach循环内部，每次遍历单个控件都会重新创建变量，既无法累积所有表单项的校验错误，也可能出现未赋值就被调用的情况
• 初始化DialogData类型对象时没有同步初始化内部的errors数组，即使写了let dialogData: DialogData = <DialogData>{};，此时dialogData.errors仍然是undefined，调用push方法自然会触发类型错误

// get all error messages
getFormValidationErrors() {
  // 提前在循环外初始化dialogData，同时给errors数组赋值为空数组
  const dialogData: DialogData = {
    errors: []
  };
  Object.keys(this.quoteForm.controls).forEach(key => {
    const controlErrors: ValidationErrors = this.quoteForm.get(key).errors;
    if (controlErrors != null) {
      Object.keys(controlErrors).forEach(keyError => {
        console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
        let errorData: ErrorData = { 
          key: key,
          keyError: keyError,
          controlErrors: controlErrors[keyError]
        }
        dialogData.errors.push(errorData);
      });
    }
  });
  // 所有错误收集完成后统一判断是否打开弹窗，避免无错误时空弹窗、多错误重复弹窗的问题
  if (dialogData.errors.length > 0) {
    this.openDialog(dialogData);
  }
}

修复同时优化了原有逻辑的缺陷：原有代码每遇到一个有错误的表单项就会触发一次弹窗，修复后会收集所有错误后只弹窗一次，也不会出现没有错误时触发空弹窗的问题。

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