面试题：Angular中如何实现简单的表单必填项验证

Question

在Angular项目里，假设你有一个用户注册表单，其中用户名和邮箱字段是必填项。请描述实现这两个字段必填项验证的具体步骤，包括在模板和组件代码中的操作，同时说明如何在前端界面友好地提示用户该项必填。

Answer 1

模板操作

1. 在用户名和邮箱的 <input> 标签中添加 required 属性：

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

2. 为每个输入框添加错误提示：

<div *ngIf="form.controls['username'].hasError('required') && (form.controls['username'].touched || form.controls['username'].dirty)">
  用户名是必填项
</div>
<div *ngIf="form.controls['email'].hasError('required') && (form.controls['email'].touched || form.controls['email'].dirty)">
  邮箱是必填项
</div>

组件代码操作

1. 导入 FormGroup 和 FormControl 并创建表单：

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      username: new FormControl(''),
      email: new FormControl('')
    });
  }
}

2. 在提交表单时，检查表单的有效性：

onSubmit() {
  if (this.form.valid) {
    // 处理表单提交逻辑
  } else {
    // 标记所有控件为已触摸，以便显示错误信息
    Object.keys(this.form.controls).forEach(field => {
      const control = this.form.get(field);
      control.markAsTouched({ onlySelf: true });
    });
  }
}

前端友好提示说明

1. 通过 *ngIf 指令结合表单控件的 hasError 方法以及 touched 或 dirty 状态，在用户输入或触摸输入框后，判断是否显示错误提示。当用户输入了内容又删除，或者聚焦后离开输入框时，触发提示，告知用户该项必填，从而实现友好的前端提示。