Question

Angular表单验证

Answer 1

注册响应式表单模块

要使用响应式表单控件，就要在 app.module.ts 文件中，从 @angular/forms 包中导入 [ReactiveFormsModule](https://angular.cn/api/forms/ReactiveFormsModule) ，并把它添加到你的 NgModule 的 imports 数组中。

1、组件中引入 import { FormControl,FormBuilder,FormGroup, Validators } from '@angular/forms'; 表单验证模块 （FormGroup：表单验证组内部有FormControl，FormBuilder：ts中使用其创建表单对象，Validators：Angular内含的验证模块）
2、在页面中创建表单组件，表单绑定 [formGroup]='form' 属性；在ts中定义 public form!:FormGroup 。同时在html页面中需要验证的表单元素中绑定 formControlName='username'

3、声明表单初始化函数(两种方法)，在组件的初始化生命周期中进行调用

4、使用get方法获取两个表单项,方便后面对页面中对提示函数的书写不用多次获取表单的项目

5、定义表单验证不通过提示函数

6、在页面中想要显示提示错误的地方引用

7、在表单提交事件中对表单验证是否通过进行判断，是否提交表单