FormGroup 检查是否有效 - TypeScript

在使用 Angular 的表单组件时，通常会使用 FormGroup 类来管理表单控件的状态。在提交表单之前，我们通常需要检查表单是否有效，以确保表单数据的正确性。在 TypeScript 中，可以通过 FormGroup 的 valid 属性来检查表单是否有效。

检查 FormGroup 是否有效

使用 valid 属性来检查 FormGroup 是否有效。valid 属性返回一个布尔值，表示 FormGroup 中所有表单控件是否都是有效的，如果全部有效，则 valid 属性为 true，否则为 false。

import { FormGroup, FormControl, Validators } from '@angular/forms';

// 创建一个 FormGroup
const myForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  password: new FormControl('', Validators.minLength(6)),
});

// 检查 FormGroup 是否有效
if (myForm.valid) {
  // 表单有效，可以提交表单
} else {
  // 表单无效，需要处理表单错误
}

在上面的代码中，我们创建了一个名为 myForm 的 FormGroup，并给它添加了三个表单控件 name、email、password。通过检查 myForm 的 valid 属性，我们可以确定表单是否有效。

获取 FormGroup 中的错误信息

如果一个 FormGroup 中存在无效的表单控件，我们需要获取这些表单控件的错误信息以便进行处理。可以使用 errors 属性来获取 FormGroup 中所有无效表单控件的错误信息。

// 检查 FormGroup 是否有效
if (myForm.valid) {
  // 表单有效，可以提交表单
} else {
  // 获取表单中所有无效控件的错误信息
  const errors = [];
  for (const key in myForm.controls) {
    const controlErrors: any = myForm.controls[key].errors;
    if (controlErrors) {
      for (const errorKey in controlErrors) {
        errors.push(`${key} ${errorKey}`);
      }
    }
  }
  console.log(errors);
}

在上面的代码中，我们遍历了 myForm.controls 对象中所有的控件，如果控件的 errors 属性不为 null，则表示该控件无效，我们就从 errors 对象中获取该控件的错误信息。最终，将所有无效控件的错误信息存储到 errors 数组中。