debugging...

src/main/webapp/app/facet-composer/facet-composer.component.html

@@ -17,8 +17,7 @@
 	    
 	    <div [formGroup]="myForm">
 			
-			
-	  		  <div formArrayName="facetBlocks">
+	  		  <div formArrayName="facetArray">
 					<div [formGroupName] ="ind" *ngFor="let fct of typeSpec.facetSpecs; let ind=index;" >
 						<mat-expansion-panel>
 							<mat-expansion-panel-header>
@@ -33,11 +32,10 @@
 								  <p>{{typeSpec.facetSpecs[ind].description}}</p>
 								  
 								    <!-- OK SO FAR -->	
-									 <div  formArrayName="facetPropsBlock" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
+									 <div  formArrayName="propertyArray" 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" >
 											    <label for="{{prop.name}}">{{i}}.{{prop.label}}</label>
-											    	<input formControlName="{{prop.name}}" id="{{prop.name}}" type="{{prop.type}}"/>
-											    
+														<input formControlName="{{prop.name}}" id="{{prop.name}}" type="{{prop.type}}"/>
 										</div>
 									</div>
 									

src/main/webapp/app/facet-composer/facet-composer.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/member-ordering */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable no-console */
 import { CommonModule } from '@angular/common';
@@ -32,6 +33,7 @@ export class FacetComposerComponent implements OnInit {
 	titlePath: string;
 	
     myForm: FormGroup ;	//form complessiva 
+    propertyGroup: FormGroup;	//form complessiva 
    
     typeSpec: ITypeSpecification;
 
@@ -42,76 +44,80 @@ export class FacetComposerComponent implements OnInit {
 			this.titleType = data.type.name;
 			this.titlePath = data.context.path;
 			this.typeSpec = {} as ITypeSpecification;
-   							
-    	   	this.myForm = this.fb.group({
-      							'facetBlocks': this.fb.array([
-									  this.fb.group({
-										  'relation':'',
-										  'facetPropsBlock':this.fb.array([]),
-										  //TODO: PROVA-> 'facetPropsBlock':this.fb.array([this.fb.group({}]),
-									  })
-								  ]),
-      							
-    							});
+			this.myForm = this.fb.group({
+				facetArray: this.fb.array([this.addFacetGroup()])
+				});
+			this.propertyGroup = this.fb.group({
+		 	 propertyGroup: [],
+			});
 			}
 		
-		get facetBlocks() {
-			    return this.myForm.get('facetBlocks') as FormArray;
-			  }
-			   
-		  
-		  get facetPropsBlock(): FormArray {
-		    return this.myForm.get('facetPropsBlock') as FormArray;
+		private addFacetGroup(): FormGroup {
+		    return this.fb.group({
+		      relation: [],
+		      propertyArray: this.fb.array([])
+		    });
 		  }
 		  
-		  /*
-		  addFacetBlocks() {
-			const fc = {} as IFacetComposer;
-		    this.facetBlocks.push(this.fb.group(fc));
-		  }	
 		  
-		  addFacetProps() {
-			const fp = {} as IFacetProps;
-		    this.facetPropsBlock.push(this.fb.control(fp));
-		  }	
-			*/
+	  addFacet(): void {
+				 this.facetArray.push(this.addFacetGroup());
+		  }
+		  
+		  
+	    removeFacet(index: number): void {
+			    this.facetArray.removeAt(index);
+		   }
 			
+	   get facetArray(): FormArray {
+			    return <FormArray>this.myForm.get('facetArray');
+			  }
+			  
+			  
+	    addProperty(index:number): void {
+			    (<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
+			  }
+			  
+			
+		
+					
 			ngOnInit(): void {
-				alert("facetPropsBlock");
-				alert(this.facetPropsBlock);
-				
 				this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
 					this.typeSpec = res;
 					this.prepareControls(res);
 					});
 			}		    
 	
+	
+	
 		prepareControls(spec:ITypeSpecification){
 			for (let i=0; i<spec.facetSpecs.length; i++){
-				this.facetBlocks.push(this.fb.group({
+				this.facetArray.push(this.fb.group({
 										'relation': [spec.facetSpecs[i].relation,Validators.required]
 								}));
 				
 				for(let j=0; j<spec.facetSpecs[i].guiProps.length; j++){
 					const props = spec.facetSpecs[i].guiProps[j];
-					alert(this.facetPropsBlock);
 					//const name = props.name;
-					if(props.validations.length===0){
-						this.facetPropsBlock.push(
+					
+					//this.myForm.addControl('new', new FormControl('', Validators.required));
+					const propGroup = this.facetArray.at(i).get('propertyArray')?.get('propertyGroup');
+					if(props.validations.length===0 && propGroup!=null){
+					//	this.testForm.addControl('new', new FormControl('', Validators.required));
+						this.propertyGroup.addControl(String(j),
 								this.fb.control({
 										j : ['',null]
 								})
 								);
 					}else{
-						this.facetPropsBlock.push(
-												this.fb.control({
-												j : ['',Validators.required],
-											})
+							this.propertyGroup.addControl(String(j),
+								this.fb.control({
+										j : ['',null]
+								})
 								);
 					}
 					
 				}
-				this.facetBlocks.push(this.facetPropsBlock);
 		  	}
 		}