gCubeSystem
/
information-system-gui
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed bugs on FormArray construction

This commit is contained in:
Maria Teresa Paratore 2024-03-12 17:02:49 +01:00
parent 9894e6434e
commit 4b415d63c4
2 changed files with 56 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/main/webapp/app/facet-composer/facet-composer.component.html
View File

@ -32,14 +32,14 @@
<p>{{typeSpec.facetSpecs[ind].description}}</p>
<!-- OK SO FAR -->
<div formArrayName="properties" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
<!--<div [formGroupName] ="i" *ngFor="let prop of typeSpec.facetSpecs[ind].guiProps; let i=index" >-->
<div [formGroupName] ="i" *ngFor="let prop of propertyArray.controls; let i=index;" >
<label for="{{typeSpec.facetSpecs[ind].guiProps[i].name}}">{{i}}.{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
<input formControlName="{{prop.name}}" id="{{prop.name}}" type="{{prop.type}}"/>
<div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;" style="border: 1px solid rgb(255, 167, 248); padding: 5px; margin: 2px;">
<div>{{ind}}-{{i}} ({{typeSpec.facetSpecs[ind].guiProps[i].type}})</div>
<label for="{{typeSpec.facetSpecs[ind].guiProps[i].name}}">{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
<input formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}"
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
</div>
</div>
</mat-expansion-panel>
</div>
</div>

98
src/main/webapp/app/facet-composer/facet-composer.component.ts
View File

@ -3,7 +3,7 @@
/* eslint-disable no-console */
import { CommonModule } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { IContextNode } from 'app/services/i-context-node';
import { IResource } from 'app/services/i-resource';
@ -33,8 +33,6 @@ export class FacetComposerComponent implements OnInit {
titlePath: string;
myForm: FormGroup; //form complessiva
//TODO: a regime sarà possibile aggiungere properties?
propertyGroup: FormGroup ; //form complessiva
typeSpec: ITypeSpecification;
@ -45,16 +43,18 @@ export class FacetComposerComponent implements OnInit {
this.titleType = data.type.name;
this.titlePath = data.context.path;
this.typeSpec = {} as ITypeSpecification;
this.propertyGroup = this.fb.group({});
this.myForm = new FormGroup({
facets: new FormArray([]),
});
this.myForm = this.fb.group({
facets: new FormArray([
])
});
/*
this.propertyGroup = new FormGroup({
properties: new FormArray([]),
});
properties: new FormArray([]),
});
*/
}
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
@ -62,16 +62,6 @@ export class FacetComposerComponent implements OnInit {
});
}
addNewExtraProperty(control:FormArray) {
control.push(
this.fb.group({
extraProp: ['']
}))
}
deleteExtraProperty(control:FormArray, index:number) {
control.removeAt(index)
}
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
@ -82,14 +72,29 @@ export class FacetComposerComponent implements OnInit {
}
}
//https://stackoverflow.com/questions/74543979/is-it-possible-to-declare-an-empty-form-group-then-add-form-controls-afterwards
createPropertyArray(item: IFacetProps[]):FormArray {
//crea propertyArray
createPropertyArray(item: IFacetProps[]):FormArray{
let fc;
const propFa: FormArray = this.fb.array([]);
const fg: FormGroup = this.fb.group({});
for (let i=0; i<item.length; i++){
const prop = item[i];
const fc = new FormControl([prop.name])
//const fc = new FormControl([prop.name])
if(prop.type==="date"){
fc = this.fb.control(new Date())
}
if(prop.type==="number"){
fc = this.fb.control(0)
}
if(prop.type==="boolean"){
fc = this.fb.control(true)
}
else{
fc = this.fb.control('') //text
}
if (prop.validations.length>0){
for (let k=0; k<prop.validations.length; k++){
if(prop.validations[k].name==='required'){
@ -101,38 +106,37 @@ export class FacetComposerComponent implements OnInit {
}
}
fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
this.propertyArray.push(fg);
propFa.push(fg); //
}
console.debug('************ PROPERTIES: fg.controls:')
console.debug(fg.controls);
return propArr;
// console.debug('************ PROPERTIES-ARRAY: fg.controls:')
// console.debug(propFa.controls);
return propFa;
}
createFacetGroup(item: IFacetComposer):void{
const fg: FormGroup = this.fb.group({});
//const propsFg = this.createPropertyGroup(item.guiProps);
const propsFa = this.createPropertyArray(item.guiProps);
const fc = new FormControl('relation',Validators.required);
fg.addControl(item.relation, fc);
fg.addControl('properties',propsFa);
/*
console.debug('************ FACET: fg.controls:')
console.debug(fg.controls);
*/
this.facetArray.push(fg);
console.debug('************ FACETARRAY:')
console.debug(this.facetArray.length);
const facetFg: FormGroup = this.fb.group({});
//const relationFc = new FormControl('relation',Validators.required);
const relationFc = this.fb.control(item.relation,Validators.required);
facetFg.addControl('relation', relationFc);
//1. creo formArray con le properties
const propertiesFa = this.createPropertyArray(item.guiProps);
//2. aggiungo formarray delle properties ai controls per la facet
facetFg.addControl('properties',propertiesFa);
//TODO
this.facetArray.push(facetFg);
// console.debug('************ FACET-ARRAY Controls:')
// console.debug(this.facetArray.controls);
}
get facetArray(): FormArray {
return <FormArray>this.myForm.get('facets');
}
get propertyArray(): FormArray {
return <FormArray>this.myForm.get('properties');
}
getPropertiesArray(index: number): FormArray{
return <FormArray>(<FormArray>this.facetArray.at(index)).get('properties');
}
///////////////////////////////
@ -152,11 +156,11 @@ export class FacetComposerComponent implements OnInit {
}
/*
addProperty(index:number): void {
(<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
}
*/
close():void {
this.dialogRef.close({event:'cancel'});