本篇文章带大家聊聊Angular中的响应式表单，通过实例来介绍一下简单的表单实现方法，希望对大家有所帮助！
由于最近公司框架升级，抛弃了原来手动检验表单的方式，将所有的表单改为响应式，由于之前没用过，在一开始我以为只有我没有用过，了解了小组里的其他同事得知基本都不是很熟悉
后面时间比较紧，没办法只能边做边学边改了，所以难免踩了一些坑，当然也花了一些时间学习，虽然对于熟悉的人来说可能很简单，但是还是将学习的过程和小结以及解决的问题的方法总结一下，也算是一种提炼。在这里更多的是理论结合实际业务需求来说，而不是一味的按照官方文档的方式写API介绍，如果那样就是学习笔记，而不是总结了。
为什么主要介绍响应式表单呢？因为响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。适用于比较复杂的表单，其实最重要的是其他的我也不会呀。
一、响应式表单基本概念
1、FormControl 、FormArray 、FormGroup
1、FormControl： 用于追踪单个表单控件的值和验证状态，例如一个栏位绑定
//初始化一个栏位的值为测试名字，并且不可用const Name:FormControl = new FormControl({value:'测试名字', disabled: true });2、FormArray：用于追踪表单控件数组的值和状态，例如几个栏位一起，常用的表格或者在表单中嵌入表格
//定义表单对象的属性为aliases的FormArray this.validateForm = this.fb.group({aliases: this.fb.array([]),}); //获取FormArray get aliases() {return this.validateForm.get('aliases') as FormArray;} //给FormArray 添加itemthis.aliases.push( this.fb.group({Id: 0,Name: [null],}));3、FormGroup：用于追踪单个表单控件的值和验证状态，它可以包含单个或多个FormControl 和 FormArray ，一般一个表单对应一个FormGroup实例，而表单的各个栏位对应FormControl 和FormArray ，当然他们可以互相嵌套，例如FormArray 中可以嵌套FormGroup，它的灵活性就是如此。
validateForm = new FormGroup({Name: new FormControl({value:'测试名字', disabled: true }),});validateForm = this.fb.group({});4、FormBuilder：是一个可注入的服务提供者，手动创建多个表单控件实例会非常繁琐，FormBuilder 服务提供了一些便捷方法来生成表单控件，以前每一个创建要先生成FormGroup 然后生成FormControl，而使用FormBuilder的group方法可以减少重复代码，说白了就是帮助方便生成表单
validateForm!: FormGroup;//手动创建validateForm = new FormGroup({ Name: new FormControl('测试名字'), }); //FormBuilder表单构建器validateForm = this.fb.group({ Name:[ { value:'测试名字',disabled:true}],});2、Validator 表单验证
表单验证用于确保用户的输入是完整和正确的。如何把单个验证器添加到表单控件中，以及如何显示表单的整体状态,通常验证器返回null表示所有的验证通过。
1、同步验证器：同步验证器函数接受一个控件实例，然后返回一组验证错误或 null，在实例化FormControl 时可以将他作为第二个参数传入
//formControlName的值必须和ts代码中FormControl 的实例一致<input type="text" id="name" class="form-control" formControlName="name" required> //判断对应的FormControl 是否没通过校验 而有错误信息<div *ngIf="name.errors?.['required']"> Name is required.</div>
//初始化一个栏位并且加入必填校验验证器const name:FormControl = new FormControl({'测试名字', disabled: true },Validators.required,); //获取这个FormControlget name() { return this.heroForm.get('name'); }2、异步验证器：异步函数接受一个控件实例并返回一个 Promise 或 Observable ，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器，在实例化FormControl 时可以将他作为第三个参数传入
3、内置验证器：例如验证一些长度，不能为空可以使用已经提供的Validator 类来实现
4、自定义验证器：系统内部提供的验证器不能满足现有需求，可以使用自定义验证器做一些个性化的校验，自定义校验器必须返回ValidationErrors类型或者空
//formControlName的值必须和ts代码中FormControl 的实例一致<input type="text" id="name" class="form-control" formControlName="name" required> //判断对应的FormControl 是否没通过校验 而有错误信息<div *ngIf="name.hasError('Invalid')"> 名字也太长了吧....</div>//初始化一个栏位并且加入必填校验验证器const name:FormControl = new FormControl({'测试名字', disabled: true },this.CustomValidators()); CustomValidators() { return (control: AbstractControl): ValidationErrors | null => { if(control.value.length!=10) { return {Invalid:true} } return null; };}3、表单及元素的基本方法和属性
方法
属性