如何在 Angular 10 中检查表单或控件是否有效？

在 Angular 中，表单是一个核心概念，可以方便地处理用户输入的数据。检查表单和控件是否有效是使用表单处理的重要部分。在本文中，我们将学习如何在 Angular 10 中检查表单和控件的有效性。

检查表单的有效性

要检查表单的有效性，在组件类中，您需要访问 FormGroup 对象并调用其 valid 属性。如果表单有效，则 valid 属性为 true，否则为 false。

下面是一个例子：

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    age: new FormControl('')
  });

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form is valid');
    } else {
      console.log('Form is invalid');
    }
  }
}

在上面的代码中，我们首先创建了一个 FormGroup 对象，并为每个控件创建了一个 FormControl 对象。然后，我们在组件类中创建了一个 onSubmit() 方法，该方法在提交表单时调用。

在 onSubmit() 方法中，我们检查表单是否有效。如果 this.myForm.valid 是 true，则打印 '表单有效'。否则，打印 '表单无效'。

检查控件的有效性

要检查单个控件的有效性，需要访问该控件的 FormControl 对象，并调用其 valid 属性。如果控件有效，则该属性为 true，否则为 false。

下面是一个例子：

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ]),
    age: new FormControl('')
  });

  onSubmit() {
    if (this.myForm.get('name').valid) {
      console.log('Name is valid');
    } else {
      console.log('Name is invalid');
    }

    if (this.myForm.get('email').valid) {
      console.log('Email is valid');
    } else {
      console.log('Email is invalid');
    }
  }
}

在上面的代码中，我们首先创建了一个 FormGroup 对象，并为每个控件创建了一个 FormControl 对象。在此示例中，我们使用表单验证器在控件上设置了一些验证规则。然后，我们在组件类中创建了一个 onSubmit() 方法，该方法在提交表单时调用。

在 onSubmit() 方法中，我们检查每个控件的有效性。例如，我们使用 get() 方法访问名为“name”的控件的 FormControl 对象，并调用其 valid 属性。如果该属性为 true，则打印 '名称有效'，否则打印 '名称无效'。同样，我们也可以检查'电子邮件'控件的有效性。

结论

在本文中，您已经学习了如何检查表单和控件的有效性。表单处理是 Angular 中的重要部分，了解如何检查表单的有效性对开发 Angular 应用程序非常有用。