import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-store-generate',
templateUrl: './store-generate.component.html',
styleUrls: ['./store-generate.component.css']
})
export class StoreGenerateComponent implements OnInit{
validateForm:FormGroup
activeTab="indoor"
tabs=['indoor']
sizeTypeList=[{name:"小桌",value:'small'},{name:"中桌",value:'middle'},{name:"大桌",value:'large'}]
constructor(private fb:FormBuilder){
this.validateForm=this.fb.group({
storename:[''],
tableSize:this.fb.group({
toggle:['true'],
groupSize:this.fb.array([
this.fb.group({
cate:['indoor'],
title_en:[''],
title_zh:[''],
tableSize:this.fb.array([
this.fb.group({
size: ["large"],
desc_en:["Large"],
desc_zh: ["大桌"],
number:['A01'],
preTitle: ["C"],
maxPerson: [8],
minPerson: [5]
}),
this.fb.group({
size: ["large"],
desc_en:["Large"],
desc_zh: ["小桌"],
number:['A02'],
preTitle: ["C"],
maxPerson: [8],
minPerson: [5]
})
])
}),
this.fb.group({
cate:['outdoor'],
title_en:[''],
title_zh:[''],
tableSize:this.fb.array([
this.fb.group({
size: ["large"],
desc_en:["Large"],
desc_zh: ["大桌"],
number:['B01'],
preTitle: ["C"],
maxPerson: [8],
minPerson: [5]
}),
])
}),
]),
}),
geoFancing:this.fb.group({
isOpenGeo:['true'],
range:[100]
}),
dynamicQRCode:['true'],
updatefrequency:[3]
})
}
ngOnInit(){
this.validateForm.get("isNeed")?.valueChanges.subscribe(value=>{
console.log("value",value)
})
}
get groupSize(): FormArray {
let gp=this.validateForm.get('tableSize.groupSize') as FormArray;
console.log('gp:',gp)
return this.validateForm.get('tableSize.groupSize') as FormArray;
}
tableSizeControls(index:number): FormArray {
let list=this.validateForm.get('tableSize.groupSize') as FormArray;
let lastlist=list.controls[index].get('tableSize') as FormArray ||[]
console.log("lastlist:",lastlist)
return lastlist
}
}
changeTab(type:string){
this.activeTab=type
}
submitForm(){
console.log("this.form",this.validateForm.value)
}
}
--------------------------------以下为html对应的结构----------------------------------
<div class=store_generate_page>
<div class="store_generate_form_wrap">
<form class="store_generate_form" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label [nzSpan]="8" nzFor="storename">店铺名称</nz-form-label>
<nz-form-control [nzSpan]="16">
<input nz-input name="storename" type="storename" formControlName="storename">
</nz-form-control>
</nz-form-item >
<nz-form-item formGroupName="tableSize">
<nz-form-label [nzSpan]="8">tale size & group size</nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-radio-group formControlName="toggle">
<label nz-radio nzValue="true">是</label>
<label nz-radio nzValue="false">否</label>
</nz-radio-group>
<!-- <ng-container *ngIf="validateForm.get('tableSize.toggle')?.value==='true'"> -->
<ng-container >
<div>
<!-- <div class="btns_wrap">
<button (click)="changeTab(tab)"
[nzType]="activeTab===tab&& tabs.length>1?'primary':'default'"
nz-button *ngFor="let tab of tabs;let i=index">{
{tab}}</button>
<a nz-button nzType="link" (click)="addTab()">Edit</a>
</div>
<div class="list_wrap" formArrayName="groupSize">
<div formArrayName="indoor" >
<nz-form-item *ngFor="let customer of indoorList.controls; let i = index">
<nz-form-control>
<div [formGroupName]="i" class="danamic_group">
<div class="danamic_group_item">
<nz-select formControlName="size">
<nz-option *ngFor="let item of sizeTypeList;let i=index" [nzValue]="item.value" [nzLabel]="item.name"></nz-option>
</nz-select>
</div>
<div classs="danamic_group_item">
<nz-input-group nzAddOnBefore="EN">
<input nz-input type="text" nz-input formControlName="desc_en"/>
</nz-input-group>
</div>
<div class="danamic_group_item">
<nz-input-group nzAddOnBefore="CH">
<input nz-input type="text" nz-input formControlName="desc_zh"/>
</nz-input-group>
</div>
<div class="danamic_group_item">
<nz-input-group nzAddOnBefore="number">
<input nz-input type="text" nz-input formControlName="number"/>
</nz-input-group>
</div>
<div class="danamic_group_item">
<nz-input-group >
<nz-input-number [nzMin]="1" type="text" nz-input formControlName="minPerson"/>
</nz-input-group>
</div>
<div class="danamic_group_item">
<nz-input-group >
<nz-input-number [nzMin]="1" type="text" nz-input formControlName="maxPerson"/>
</nz-input-group>
</div>
</div>
</nz-form-control>
</nz-form-item>
</div>
<div formArrayName="outdoor" *ngIf="outdoorList&&outdoorList.length>0&&activeTab==='outdoor'">
<nz-form-item *ngFor="let customer of outdoorList.controls; let i = index">
<nz-form-control>
<div [formGroupName]="i" class="danamic_group">
<nz-space>
<div *nzSpaceItem class="danamic_group_item">
<nz-input-group nzAddOnBefore="Key" >
<input nz-input type="text" nz-input formControlName="size"/>
</nz-input-group>
</div>
<div *nzSpaceItem class="danamic_group_item">
<nz-input-group nzAddOnBefore="EN">
<input nz-input type="text" nz-input formControlName="desc_en"/>
</nz-input-group>
</div>
<div *nzSpaceItem class="danamic_group_item">
<nz-input-group nzAddOnBefore="CH">
<input nz-input type="text" nz-input formControlName="desc_zh"/>
</nz-input-group>
</div>
<div *nzSpaceItem class="danamic_group_item">
<nz-input-group nzAddOnBefore="number">
<input nz-input type="text" nz-input formControlName="number"/>
</nz-input-group>
</div>
<div *nzSpaceItem class="danamic_group_item">
<nz-input-group >
<nz-input-number [nzMin]="1" type="text" nz-input formControlName="minPerson"/>
</nz-input-group>
</div>
<div *nzSpaceItem class="danamic_group_item">
<nz-input-group >
<nz-input-number [nzMin]="1" type="text" nz-input formControlName="maxPerson"/>
</nz-input-group>
</div>
</nz-space>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div> -->
<nz-tabset nzType="card" formArrayName="groupSize" >
<nz-tab [nzTitle]="group.value.cate" *ngFor="let group of groupSize.controls; let i = index" [formGroupName]="i">
<div formArrayName="tableSize">
<div>
<nz-form-item *ngFor="let table of tableSizeControls(i)?.['controls']; let j = index" [formGroupName]="j">
<nz-form-control>
<div class="danamic_group">
<div class="danamic_group_item">
<nz-input-group nzAddOnBefore="Key" >
<input nz-input type="text" nz-input formControlName="size"/>
</nz-input-group>
</div>
<div class="danamic_group_item" >
<nz-input-group nzAddOnBefore="EN" >
<input nz-input type="text" nz-input formControlName="desc_en"/>
</nz-input-group>
</div>
<div class="danamic_group_item" >
<nz-input-group nzAddOnBefore="CH">
<input nz-input type="text" nz-input formControlName="desc_zh"/>
</nz-input-group>
</div>
<div class="danamic_group_item" >
<nz-input-group nzAddOnBefore="number">
<input nz-input type="text" nz-input formControlName="number"/>
</nz-input-group>
</div>
<div class="danamic_group_item" >
<nz-input-group >
<nz-input-number [nzMin]="1" type="text" nz-input formControlName="minPerson"/>
</nz-input-group>
</div>
<div class="danamic_group_item">
<nz-input-group >
<nz-input-number [nzMin]="1" type="text" nz-input formControlName="maxPerson"/>
</nz-input-group>
</div>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
</nz-tab>
</nz-tabset>
</div>
<div class="oprate_add_remove_wrap">
<nz-space nzSize="middle">
<span *nzSpaceItem (click)="add()"> Add</span> <span (click)="remove()" *nzSpaceItem>Remove</span>
</nz-space>
</div>
</ng-container>
</nz-form-control>
</nz-form-item>
<div formGroupName="geoFancing">
<nz-form-item>
<nz-form-label [nzSpan]="8">Geo-dncing </nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-radio-group formControlName="isOpenGeo">
<label nz-radio nzValue="true">是</label>
<label nz-radio nzValue="false">否</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="8">Geo-dncing-range </nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-space>
<nz-input-number formControlName="range" *nzSpaceItem [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
<span *nzSpaceItem>KM</span>
</nz-space>
</nz-form-control>
</nz-form-item>
</div>
<nz-form-item>
<nz-form-label [nzSpan]="8">Geo-dncing-range </nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-radio-group formControlName="dynamicQRCode">
<label nz-radio nzValue="true">是</label>
<label nz-radio nzValue="false">否</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="8">Update frequency </nz-form-label>
<nz-form-control [nzSpan]="16">
<nz-space>
<nz-input-number *nzSpaceItem [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
<span *nzSpaceItem>KM</span>
</nz-space>
</nz-form-control>
</nz-form-item>
<nz-form-item >
<nz-form-control [nzOffset]="8">
<nz-space ngSize="large">
<button *nzSpaceItem nz-button nzType="primary">提交</button>
<button *nzSpaceItem nz-button >保存</button>
</nz-space>
</nz-form-control>
</nz-form-item>
</form>
</div>
</div>angular中如何实现一个多层复杂的表单
猜你喜欢
转载自blog.csdn.net/baidu_41601048/article/details/131934952
今日推荐
周排行