面试题：Angular复杂表单中如何实现基本的表单验证

使用Angular自带验证器实现基本表单验证：
- 在模板驱动表单中：
  - 对于文本框，例如用户名输入框，添加required和minlength验证器，示例代码如下：

<input type="text" name="username" [(ngModel)]="user.username" required minlength="3">

 - 对于下拉框，同样可以添加验证器，假设一个选择用户角色的下拉框：

<select name="role" [(ngModel)]="user.role" required>
  <option value="admin">管理员</option>
  <option value="user">普通用户</option>
</select>

在响应式表单中：
- 构建表单组和表单控件时指定验证器。例如：

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

@Component({
  selector: 'app - register - form',
  templateUrl: './register - form.component.html',
  styleUrls: ['./register - form.component.css']
})
export class RegisterFormComponent {
  registerForm: FormGroup;
  constructor() {
    this.registerForm = new FormGroup({
      'username': new FormControl('', [Validators.required, Validators.minLength(3)]),
      'role': new FormControl('', Validators.required)
    });
  }
}

在模板中显示验证错误信息：
- 模板驱动表单：
  - 使用ngForm指令的controls属性来访问表单控件的验证状态。例如对于用户名输入框：

<input type="text" name="username" [(ngModel)]="user.username" required minlength="3">
<div *ngIf="myForm.controls['username'].hasError('required') && (myForm.controls['username'].touched || myForm.controls['username'].dirty)">用户名是必填项</div>
<div *ngIf="myForm.controls['username'].hasError('minlength') && (myForm.controls['username'].touched || myForm.controls['username'].dirty)">用户名长度至少为3个字符</div>

这里myForm是模板中ngForm指令的引用，例如<form #myForm="ngForm">。

响应式表单：
- 通过表单控件实例的hasError方法来判断验证错误，并显示相应信息。例如：

<input type="text" formControlName="username">
<div *ngIf="registerForm.get('username').hasError('required') && (registerForm.get('username').touched || registerForm.get('username').dirty)">用户名是必填项</div>
<div *ngIf="registerForm.get('username').hasError('minlength') && (registerForm.get('username').touched || registerForm.get('username').dirty)">用户名长度至少为3个字符</div>

这里registerForm是组件类中定义的FormGroup实例。

面试题：Angular复杂表单中如何实现基本的表单验证

知识考点

面试题答案