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

Question

在Angular项目中，假设你有一个简单的登录表单，包含用户名和密码字段。请描述如何使用Angular的表单验证机制实现用户名和密码为必填项，并在用户未填写时给出相应的错误提示。

Answer 1

1. 模板驱动表单：
   • 在模板中，为input元素添加required属性。例如：

   <form #loginForm="ngForm">
     <input type="text" name="username" required [(ngModel)]="user.username" />
     <div *ngIf="loginForm.controls['username']?.hasError('required') && (loginForm.controls['username']?.touched || loginForm.controls['username']?.dirty)">
       用户名是必填项
     </div>
     <input type="password" name="password" required [(ngModel)]="user.password" />
     <div *ngIf="loginForm.controls['password']?.hasError('required') && (loginForm.controls['password']?.touched || loginForm.controls['password']?.dirty)">
       密码是必填项
     </div>
     <button type="submit">登录</button>
   </form>
   

   • 这里[(ngModel)]用于双向数据绑定，#loginForm="ngForm"创建一个表单引用。通过*ngIf指令，当表单控件有required错误且控件被触摸或修改时，显示错误提示。
2. 响应式表单：
   • 首先在组件类中创建表单：

   import { Component } from '@angular/core';
   import { FormGroup, FormControl, Validators } from '@angular/forms';
   
   @Component({
     selector: 'app - login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.css']
   })
   export class LoginComponent {
     loginForm: FormGroup;
     constructor() {
       this.loginForm = new FormGroup({
         'username': new FormControl('', Validators.required),
         'password': new FormControl('', Validators.required)
       });
     }
   }
   

   • 然后在模板中使用表单：

   <form [formGroup]="loginForm">
     <input type="text" formControlName="username" />
     <div *ngIf="loginForm.get('username')?.hasError('required') && (loginForm.get('username')?.touched || loginForm.get('username')?.dirty)">
       用户名是必填项
     </div>
     <input type="password" formControlName="password" />
     <div *ngIf="loginForm.get('password')?.hasError('required') && (loginForm.get('password')?.touched || loginForm.get('password')?.dirty)">
       密码是必填项
     </div>
     <button type="submit">登录</button>
   </form>
   

   • 这里使用FormGroup和FormControl创建响应式表单，Validators.required添加必填验证。在模板中通过formControlName绑定表单控件，并根据表单控件的错误状态显示错误提示。