面试题：Angular模板驱动表单中如何进行基本的表单验证

Question

在Angular的模板驱动表单中，描述如何对一个输入框进行必填项验证以及显示相应的错误信息。请给出关键的HTML模板代码和可能涉及到的TS代码片段。

Answer 1

HTML模板代码

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

TS代码片段

通常在模板驱动表单中，TS代码无需额外写针对此验证的逻辑，因为Angular内置指令已经处理。但如果组件类中有相关逻辑，可能如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  user = { username: '' };
}