响应式表单嵌套结构
效果
一层表单动态增加
[Angular]——动态增加表单项二层表单嵌套实现(一层数组)
form-ponent.html
<nz-divider [nzText]="'表单嵌套'"></nz-divider><form [formGroup]="validateForm"><nz-form-item><nz-form-label nzSpan="3" nz-col>工作流名称</nz-form-label><nz-form-control nzSpan="7" nz-col><input nz-input type="text" placeholder="请输入工作流名称" formControlName="workFlowName"></nz-form-control><nz-form-label nzSpan="3" nzOffset="1" nz-col>工作流类型</nz-form-label><nz-form-control nzSpan="7" nz-col><input nz-input type="text" placeholder="请输入工作流类型" formControlName="workFlowType"></nz-form-control></nz-form-item><nz-form-item><nz-form-label nzSpan="3" nz-col>工作流内容</nz-form-label><button nz-button (click)="addStage()">增加stage</button><nz-form-control nzSpan="18"><div class="workFlowContent" formArrayName="workFlowContent" *ngFor="let content of workFlowContent.controls;let workflowIndex = index"><div [formGroupName]="workflowIndex.toString()"><nz-row><nz-form-label nzSpan="3" nz-col>stage{{workflowIndex + 1}}</nz-form-label><nz-form-control nzOffset="15" nzSpan="3" nz-col><button nz-button (click)="removeStage(workflowIndex)">删除</button></nz-form-control></nz-row><nz-row><nz-form-label nzSpan="3" nz-col>stageName</nz-form-label><nz-form-control nz-col nzSpan="7"><input nz-input type="text" formControlName="stageName"></nz-form-control><nz-form-label nzOffset="1" nzSpan="3" nz-col>stageType</nz-form-label><nz-form-control nz-col nzSpan="7"><input nz-input type="text" formControlName="stageType"></nz-form-control></nz-row><!-- <nz-row><nz-form-label nzSpan="3" nz-col>stageContent</nz-form-label><nz-form-control nz-col nzSpan="18"><nz-row formArrayName="stageContent"*ngFor="let stage of stageContent.controls;let stageIndex = index"><input nz-input [formControlName]="stageIndex.toString()"></nz-row></nz-form-control></nz-row> --></div></div></nz-form-control></nz-form-item></form><nz-form-item><nz-form-label nzSpan="3" nz-col>表单的值</nz-form-label><nz-form-control nzSpan="21" nz-col>{{validateForm.value | json}}</nz-form-control></nz-form-item>
form-ponent.css
.workFlowContent {background: #e6f7ff;border: 1px solid #91d5ff;padding: 10px;border-radius: 4px;}
form-ponent.ts
import {Component, OnInit } from '@angular/core';import {FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';@Component({selector: 'uv-form-nested',templateUrl: './form-ponent.html',styleUrls: ['./form-ponent.css']})export class FormNestedComponent implements OnInit {public validateForm: FormGroup;constructor(private fb: FormBuilder) {this.validateForm = this.fb.group({workFlowName: [null, [Validators.required]],workFlowType: [null, [Validators.required]],workFlowContent: this.fb.array([this.fb.group({stageName: [null, [Validators.required]],stageType: [null, [Validators.required]],// stageContent: this.fb.array([// this.fb.control(null)// ]),})])});}get workFlowContent(): FormArray {return this.validateForm.get('workFlowContent') as FormArray;}get stageContent(): FormArray {return this.validateForm.get('stageContent') as FormArray;}ngOnInit() {}public addStage(): void {this.workFlowContent.push(this.fb.group({stageName: [null, [Validators.required]],stageType: [null, [Validators.required]],stageContent: this.fb.array([this.fb.control(null)]),}));}public removeStage(workflowIndex: number): void {this.workFlowContent.removeAt(workflowIndex);}}
提示： 要继续嵌套，在初始化时，不要设置为null，设置为this.fb.array([]),即可，否则会报错
参考
Angular 响应式表单-FormArray 和 FormGroup的多层嵌套Angular学习笔记45：响应式表单-FormArray & 动态的增加、减少FormArray中的元素 & 给FormArray 赋值其他
Angular：动态创建Form表单Angular4 实现动态Form
三层表单嵌套实现(二层数组)
数据格式
autoFormData: T[] = [{"key": "title","value": "1-1数据","ui_type": "editbox","ui_title": "1-1"},{"key": "fireTime","value": [{"key": "fireTime1","value": "2-1数据","ui_type": "editbox","ui_title": "2-1"},{"key": "fireTime2","value": "2-2数据","ui_type": "editbox","ui_title": "2-2"}],"ui_type": "editboxes","ui_title": "1-2"}]
表单结构
this.validateForm = this.fb.group({target: [null, [Validators.required]],opcode: [null, [Validators.required]],body: this.fb.array([// 初始化后的形式：this.fb.group({key: [null, [Validators.required]],ui_title: [null, [Validators.required]],ui_type: [null, [Validators.required]],value: this.fb.array([this.fb.group({key: [null, [Validators.required]],ui_type: [null, [Validators.required]],ui_title: [null, [Validators.required]],value: [null, [Validators.required]],})]),})])});
效果
源码
.html
<div><button (click)="showFormValue()">查看表单值</button><!-- <nz-switch [(ngModel)]="switchValue" (ngModelChange)="change('')"></nz-switch> --></div><nz-divider></nz-divider><form [formGroup]="validateForm"><div nz-row [nzGutter]="8"><div nz-col nzSpan="12"><nz-form-item><nz-form-label nz-col nzSpan="3">target</nz-form-label><nz-form-control nz-col nzSpan="21"><input nz-input type="text" formControlName="target"></nz-form-control></nz-form-item></div></div><div nz-row [nzGutter]="8"><div nz-col nzSpan="12"><nz-form-item><nz-form-label nz-col nzSpan="3">opcode</nz-form-label><nz-form-control nz-col nzSpan="21"><input nz-input type="text" formControlName="opcode"><!-- <nz-select formControlName="opcode" nzPlaceHolder="请选择" (ngModelChange)="opCodeChange()"><ng-container *ngFor="let item of opCodeOps"><nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option></ng-container></nz-select> --></nz-form-control></nz-form-item></div></div><div nz-row [nzGutter]="8"><div nz-col nzSpan="24"><nz-form-item><nz-form-label nz-col nzSpan="1">body</nz-form-label><nz-row nz-col nzSpan="23"><button (click)="newValueStr()">增加editbox</button><button (click)="newValueArr()">增加editboxes</button></nz-row></nz-form-item></div><div nz-col nzSpan="24"><nz-form-item><nz-form-control nzOffset="4" nzSpan="20"><div class="workFlowContent" formArrayName="body" *ngFor="let content of body.controls;let workflowIndex = index"><div [formGroupName]="workflowIndex.toString()"><!-- <nz-row>formGroupName： {{workflowIndex}}</nz-row> --><nz-row nz-col nzOffset="22"><button nz-button (click)="deleteValue(workflowIndex)">删除</button></nz-row><nz-row><nz-form-label nzSpan="4" nz-col>ui_title</nz-form-label><nz-form-control nz-col nzSpan="7"><input nz-input type="text" formControlName="ui_title"></nz-form-control></nz-row><nz-row><nz-form-label nzSpan="4" nz-col>ui_type</nz-form-label><nz-form-control nz-col nzSpan="7"><input nz-input type="text" formControlName="ui_type"></nz-form-control></nz-row><nz-row><nz-form-label nzSpan="4" nz-col>key</nz-form-label><nz-form-control nz-col nzSpan="7"><input nz-input type="text" formControlName="key"></nz-form-control></nz-row><!-- value为字符串 --><ng-container *ngIf="getValue(content).controls == undefined; else other_ediboxes"><nz-row><nz-form-label nzSpan="4">value</nz-form-label><nz-form-control nz-col nzSpan="7"><input nz-input type="text" formControlName="value"></nz-form-control></nz-row></ng-container><!-- value为数组 --><ng-template #other_ediboxes><nz-row><nz-form-label nz-col nzSpan="4">value</nz-form-label><nz-row nz-col nzSpan="2"><button (click)="newSubValueStr(workflowIndex)">增加</button></nz-row></nz-row><nz-row><nz-form-control nzOffset="4" nz-col nzSpan="20"><div formArrayName="value" class="stageContent" *ngFor="let stage of getValue(content).controls;let stageIndex = index"><div [formGroupName]="stageIndex.toString()"><!-- <nz-row>formGroupName: {{stageIndex}}</nz-row> --><!-- {{vJson(stage)}} --><!-- {{getControlsValueByKey(stage, "value")}} --><nz-row nz-col nzOffset="22" style="margin-bottom: 10px;"><button (click)="deleteSubValue(workflowIndex, stageIndex)">删除</button></nz-row><nz-row><nz-form-label nzSpan="8" nz-col>ui_title</nz-form-label><nz-form-control nzSpan="16" nz-col><input nz-input type="text" formControlName="ui_title" placeholder="请输入"></nz-form-control></nz-row><nz-row><nz-form-label nzSpan="8" nz-col>ui_type</nz-form-label><nz-form-control nzSpan="16" nz-col><input nz-input type="text" formControlName="ui_type" placeholder="请输入"></nz-form-control></nz-row><nz-row><nz-form-label nzSpan="8" nz-col>key</nz-form-label><nz-form-control nzSpan="16" nz-col><input nz-input type="text" formControlName="key" placeholder="请输入"></nz-form-control></nz-row><nz-row><nz-form-label nzSpan="8" nz-col>value</nz-form-label><nz-form-control nzSpan="16" nz-col><ng-container><input nz-input type="text" formControlName="value" placeholder="请输入"></ng-container></nz-form-control></nz-row></div></div></nz-form-control></nz-row><nz-row></nz-row></ng-template></div></div></nz-form-control></nz-form-item></div></div></form><nz-form-item><nz-form-label nzSpan="2" nz-col>表单的值</nz-form-label><nz-form-control nzSpan="22" nz-col>{{validateForm.value | json}}</nz-form-control></nz-form-item><div nz-row [nzGutter]="10"><div nz-col nzSpan="12"><button nz-button nzType="primary" (click)="submit()">提交</button></div></div>
.ts
import {Component, OnInit } from '@angular/core';import {FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';import {UhttpService } from '@uviews/conn-server';import {NzMessageService } from 'ng-zorro-antd/message';import {ShareService } from '../service/share.service';import {HttpClient } from '@angular/common/http';interface T {key: string,value: any,ui_type: string,ui_title: string}@Component({selector: 'uv-add-conf2',templateUrl: './add-ponent.html',styleUrls: ['./add-ponent.css']})export class AddConf2Component implements OnInit {vJson(e: any) {// console.log(e)// console.log(e.controls)// console.log(e.controls["value"].value)console.log(JSON.stringify(e, undefined, 2))}// 根据key获取FormControls的值getControlsValueByKey(e: any, key: string) {// console.log(e.controls[key].value)return e.controls[key].value}public validateForm!: FormGroup;constructor(public shareService: ShareService,private fb: FormBuilder,private message: NzMessageService,private uHttp: UhttpService,private http: HttpClient) {}ngOnInit() {this.initFormGroup()}// 初始化基础表单initFormGroup() {this.validateForm = this.fb.group({target: [null, [Validators.required]],opcode: [null, [Validators.required]],body: this.fb.array([// 初始化后的形式：// this.fb.group({// key: [null, [Validators.required]],// ui_title: [null, [Validators.required]],// ui_type: [null, [Validators.required]],// value: this.fb.array([//this.fb.group({// key: [null, [Validators.required]],// ui_type: [null, [Validators.required]],// ui_title: [null, [Validators.required]],// value: [null, [Validators.required]],//})// ]),// })])});}// 获取body的formControlsget body(): FormArray {return this.validateForm.get('body') as FormArray;}// 获取gcontent对应的value的formControlsgetValue(content: any) {return content.get('value') as FormArray;}// 新建FormControl类型的value，即value为字符串newValueStr() {this.body.push(this.fb.group({key: ['', [Validators.required]],ui_type: ['', [Validators.required]],ui_title: ['', [Validators.required]],value: ['', [Validators.required]]}))}// 新建FormArray类型的value，即value为数组newValueArr() {this.body.push(this.fb.group({key: ['', [Validators.required]],ui_type: ['', [Validators.required]],ui_title: ['', [Validators.required]],value: this.fb.array([this.fb.group({key: ['', [Validators.required]],ui_type: ['', [Validators.required]],ui_title: ['', [Validators.required]],value: ['', [Validators.required]]})]),}));}// 删除第一层valuedeleteValue(index: number) {console.log(index)this.body.removeAt(index);}// 新建第二层FormControl类型的value，即value为字符串newSubValueStr(bodyIndex: number) {(this.body.at(bodyIndex).get('value') as FormArray).push(this.fb.group({key: ['', [Validators.required]],ui_type: ['', [Validators.required]],ui_title: ['', [Validators.required]],value: ['', [Validators.required]]}));}// 删除第二层valuedeleteSubValue(valueIndex: number, subValueIndex: number) {(this.body.at(valueIndex).get('value') as FormArray).removeAt(subValueIndex);}showFormValue() {console.log(this.validateForm)console.log(JSON.stringify(this.validateForm.value, undefined, 2))}submit() {this.vJson(this.validateForm.value)if (this.validateForm.valid) {const data = this.validateForm.valuethis.http.patch(`http://127.0.0.1:8000/api/control_console/${data.target}/${data.opcode}`, data.body).subscribe((res: any) => {if (res.code == 0) {this.message.success("添加成功")this.validateForm.reset()} else {this.message.error(res.message)}})}else {Object.values(this.validateForm.controls).forEach(control => {console.log(control)if (control.invalid) {control.markAsDirty();control.updateValueAndValidity({onlySelf: true });}if(control.value != null) {// console.log(control.valid)this.message.error("请填写完整")}});}}}
参考
【angular-实践】由数据生成表单,多层嵌套
