Angular中响应式表单 FormBuilder、FormControl 、FormGroup、FormArray、setControl、setValue用法总结

以我的项目作为示例，总结一下Angular响应式表单的应用和常用的方法：

1.创建表单

form.ts代码

import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";@Component({selector: "app-form",templateUrl: "./form.component.html"
})
export class SLSDetailComponent implements OnInit{slsForm: FormGroup;//定义表单slsFormngOnInit(): void {this.createForm();//初始化创建表单}createForm() {//创建项目需要的数据（多层嵌套的数据）this.slsForm = this.fb.group({UserServiceDescription: this.fb.group({}),VPL: this.fb.group({})});}//setControl设置值this.slsForm.setControl("UserServiceDescription",this.fb.group({sgServiceIdRef: [sls.desc.sgServiceIdRef],serviceId: [sls.desc.serviceId,[Validators.required, Validators.min(0)]],serviceStatus: [sls.desc.serviceStatus, Validators.required],Name: this.fb.array(sls.desc.names.map(name => this.fb.group(name))),ServiceLanguage: this.fb.array(sls.desc.serviceLanguages.map(lang => this.fb.control(lang)))}));this.slsForm.setControl("VPL",this.fb.group({CT: this.fb.array(sls.vpl.cts.map(ct => this.createCtForm(ct))),UC: this.fb.array(sls.vpl.unicasts.map(uc => this.createUcForm(uc))),VOD: this.fb.array(sls.vpl.unicastVods.map(vod => this.createVodForm(vod))),BFP: this.fb.array(sls.vpl.bfps.map(bfp => this.createBfpForm(bfp)))}));}

访问FormGroup、FormArray方法：

get userServiceDescription(): FormGroup {return this.slsForm.get("UserServiceDescription") as FormGroup;}get vpl(): FormGroup {return this.slsForm.get("VPL") as FormGroup;}get names(): FormArray {return this.userServiceDescription.get("Name") as FormArray;}get serviceLanguages(): FormArray {return this.userServiceDescription.get("ServiceLanguage") as FormArray;}get cts(): FormArray {return this.vpl.get("CT") as FormArray;}//访问某个FormArray下的FormArray（双层嵌套）getCtCtUrls(index: number): FormArray {return this.cts.at(index).get("CtUrl") as FormArray;}

为FormArray添加一条数据：

addName(name?: Name) {let newName = name ? name : SchemaService.defaultServiceName;this.names.push(this.fb.group({text: [newName.text, Validators.required],lang: [newName.lang]}));}

删除某条FormArray中的数据：

deleteFromFormArray(formArray: FormArray, index: number) {formArray.removeAt(index);}

全部删除FormArray的数据：

deleteAll(formArray: FormArray) {formArray.controls.splice(0);formArray.setValue([]);}

patchValue设置某个FormControl的值，更新表单的值：

 onServiceIdSelected(serviceId: string) {this.slsForm.patchValue({UserServiceDescription: {sgServiceIdRef: serviceId}});
}

patchValue和setValue:

https://blog.csdn.net/qq_29483485/article/details/86542959

Angular中响应式表单 FormBuilder、FormControl 、FormGroup、FormArray、setControl、setValue用法总结相关推荐

灵雀云前端： Angular 响应式表单
Kubernetes 对象实战简介 Kubernetes 集群的使用者日常工作中经常需要与 Deployment 等 Kubernetes 对象接触.熟悉 Kubernetes 的朋友都会知道,Ku ...
Angular 响应式表单
Kubernetes 对象实战简介 Kubernetes 集群的使用者日常工作中经常需要与 Deployment 等 Kubernetes 对象接触.熟悉 Kubernetes 的朋友都会知道,Ku ...
angular6的响应式表单
1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的NgM ...
Angular4模板式表单、响应式表单、表单状态字段
时隔十多天我(独臂侠灰常怀念两只胳膊~~(><)~~)又来了,之前是第三章的内容,今天先写*第七章表单处理*的内容吧,内容太多了,有必要记下来,如果有幸被看到欢迎指正^^ 表单有: - ...
Angular响应式表单及表单验证
1. 什么是响应式表单? 响应式表单提供了一种模型驱动的方式来处理表单输入,其中的值会随时间而变化. 响应式表单使用显示的,不可变的方式,管理表单在特定时间点上的状态.对表单状态的每一次变更都会返回一 ...
Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
Angular 响应式表单 patchValue和setValue
在 Angular 4 中有多种方式可以更新表单的值,对于使用响应式表单的场景,我们可以通过框架内部提供的 API ,(如 patchValue 和 setValue )方便地更新表单的值.这篇文章我 ...
Angular 响应式表单基础例子
1.案例需求表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能 2.代码分析在线预览 git仓库本案例中使用了响应式表单,响应式表单在表单的校验方面 ...
Angular2响应式表单
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...

Angular中响应式表单 FormBuilder、FormControl 、FormGroup、FormArray、setControl、setValue用法总结

Angular中响应式表单 FormBuilder、FormControl 、FormGroup、FormArray、setControl、setValue用法总结相关推荐

最新文章

热门文章