.hasError('required')方法介绍

1. 概述

在前端开发中，表单验证是一个必不可少的功能。在Angular中，通过@angular/forms库提供的相关组件和指令，可以轻松实现表单验证。

其中，FormControl就是处理单个表单元素的验证控制器，该控制器提供了一系列方法来验证表单元素的有效性。其中，.hasError('required')方法用于判断表单元素是否满足必填条件。

2. 语法

.hasError(errorCode: string, path?: Array<string | number>)

• errorCode：必填项，字符串类型，表示需要检查的错误码。
• path：可选项，数组类型，表示嵌套路径，用于检查嵌套表单元素的错误。

3. 返回值

.hasError('required')方法返回一个布尔值，表示表单元素是否满足必填条件。若满足则返回true，否则返回false。

4. 示例

下面是一个基本的示例，用于判断一个表单元素是否为必填项：

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="name">
      <button (click)="submit()">Submit</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({
    name: new FormControl('', [Validators.required]),
  });
  
  submit() {
    if (this.form.get('name').hasError('required')) {
      console.log('Name is required!');
    } else {
      console.log('Submit successfully!');
    }
  }
}

在上面的示例中，我们在FormControl中定义了一个名为name的表单元素，同时使用了Validators.required来指定该表单元素为必填项。在点击Submit按钮时，我们调用.hasError('required')方法来判断该表单元素是否满足必填条件，若不满足则输出提示信息。