一文浅析Angular中的响应式表单 _生活百科

本篇文章带大家聊聊Angular中的响应式表单，通过实例来介绍一下简单的表单实现方法，希望对大家有所帮助！

文章插图

由于最近公司框架升级，抛弃了原来手动检验表单的方式，将所有的表单改为响应式，由于之前没用过，在一开始我以为只有我没有用过，了解了小组里的其他同事得知基本都不是很熟悉
后面时间比较紧，没办法只能边做边学边改了，所以难免踩了一些坑，当然也花了一些时间学习，虽然对于熟悉的人来说可能很简单，但是还是将学习的过程和小结以及解决的问题的方法总结一下，也算是一种提炼。在这里更多的是理论结合实际业务需求来说，而不是一味的按照官方文档的方式写API介绍，如果那样就是学习笔记，而不是总结了。
为什么主要介绍响应式表单呢？因为响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。适用于比较复杂的表单，其实最重要的是其他的我也不会呀。【相关教程推荐：《angular教程》】
一、响应式表单基本概念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>

一文浅析Angular中的响应式表单

推荐阅读

忙碌了多少天辛苦了多少年是啥歌快去听一下吧

煤炭公司起名大全免费煤炭行业起名大全

商业承兑汇票是什么意思商业承兑汇票的理解

喝番茄汁有什么好处番茄汁的好处有哪些

一斤几克重，一斤等于多少千克

教你如何使用迅雷离线下载[新发布]

“八岐之术”是什么？

在“再见阿郎”中的刘金虎怎么又是金鹏？

皮蛋是生的还是熟的怎么判断皮蛋是生的还是熟的

节日由来英语节日由来

孕妇梦见和别人吵架孕妇梦见别人挣了很多钱

etc不抬杆可以倒回吗 etc不抬杆可以倒回会被扣分吗

梦见和当官的同学在一起商人梦见当官的同学

五岳奇险天下第一山是哪座山天下第一山是哪座山

我们好像在哪见过歌词我们好像在哪见过歌词歌谱

天麻能泡白酒吗天麻可以和虫草花一起煲汤吗

瑜伽入门动作图解瑜伽入门动作图解上

如何通过女人面相看婚姻哪些面相的女人婚姻好

关于洛阳昊远机械设备有限公司简述洛阳昊远机械设备有限公司

梦见水里有黑鱼在游