adjusting FormControls, FormArrays and FormGroups

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

@@ -1,6 +1,8 @@
 <h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
 
+<!-- myForm inizio form globale -->
 <mat-dialog-content>
+	
         <mat-expansion-panel>
 				    <mat-expansion-panel-header>
 				      <mat-panel-title>
@@ -12,41 +14,53 @@
 				    </mat-expansion-panel-header>
 				    <p> {{typeSpec.description}} </p>
 	    </mat-expansion-panel>
-	    <!--inizio form esterna (elenco facet)-->
+	    
+	    <div [formGroup]="myForm">
+	  		  <div formArrayName="facets">
+					
 	     		<div *ngFor="let fct of typeSpec.facetSpecs; let ind=index;">
 					<mat-expansion-panel>
 						<mat-expansion-panel-header>
 							<mat-panel-title>
 							<!--TODO: vedi quando si possono rendere editabili le relazioni-->
-						 <input type="text" value="{{fct.relation}}" disabled="true"/>
+							<input type="text" value="{{typeSpec.facetSpecs[ind].relation}}" disabled="true"/>
 							 </mat-panel-title>
 							     <mat-panel-description>
-				        {{fct.name}}
+							        {{typeSpec.facetSpecs[ind].name}}
 							      </mat-panel-description>
 							  </mat-expansion-panel-header>
-				    <p>{{fct.description}}</p>
+							  <p>{{typeSpec.facetSpecs[ind].description}}</p>
-				     <div style="border: 1px solid blue; padding: 10px; margin: 5px;">
+							  
-					 formGroup per la facet {{ind}}:<br>
+							    <!-- OK SO FAR -->			
-					 <!--
+							    <p>group {{ind}}</p>
-					 <br> ******** <br>
+								 <div  formArrayName="facetProps" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
-					  {{fct.guiProps[0]|json}}
+										<div formGroupName="ind">
-					 <br> ******** <br>
+											<div *ngFor="let facet of facetProps.controls; let i=index" >
-					 {{fct.guiProps[1]|json}}
+										    <p> control {{i}} - <label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
-					 <br>
+										    	<input formControlName="name" type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
-					 -->
+										    </p>
-					 	<div *ngFor="let x of facetItemsArray.controls; let i=index;" [formGroupName]="i">
-					 		<label>{{facetItemsList2D[ind][i].label}}</label>
-					 		<input formControlName="'formItem'+String(ind)+String(i)" type="{{fct.guiProps[i].type}}" placehoder=""/>
 									    </div>
 									</div>
+								</div>
+								
+								
 				</mat-expansion-panel>
 			</div>
+  		</div>
+  		
+  		
+  		
+  		
+  		
+  		
+  		
+  		
+  </div>
+		 <!-- <button mat-button (click)="doAction()">Save Form</button> -->
+ <!--</form>-->
 	    <!--fine form esterna-->
-	    
-	    
 </mat-dialog-content>    
-	    
 <mat-dialog-actions align="end">
    <button mat-button (click)="close()">Cancel</button>
-  <!-- <button mat-button (click)="doAction()">Save</button> -->
 </mat-dialog-actions>
+	    <!--fine form esterna-->

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

@@ -12,7 +12,6 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { IFacetProp } from 'app/services/i-facet';
 
 
 
@@ -32,21 +31,9 @@ export class FacetComposerComponent implements OnInit {
 	titleType: string;
 	titlePath: string;
 	
-    facetListForm: FormGroup | any ;	//form complessiva
+    myForm: FormGroup ;	//form complessiva 
+    
     typeSpec: ITypeSpecification;
-	//primo indice: facetSpecs, secondo: guiProps (in facetSpecs)
-    facetItemsList2D: IFacetGui[][] = [];
-    facetPropsControls: FormGroup[][] =[]; //form per le props di una singola facet
-/*
-	defaultFacetGui = {
-		  name: '',
-		  description: '',
-		  mandatory:false,
-		  notnull:false,
-		  regexp:'',
-		  propertyType:''
-	  };
-	*/  
 
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
@@ -56,123 +43,52 @@ export class FacetComposerComponent implements OnInit {
 			this.titleType = data.type.name;
 			this.titlePath = data.context.path;
 			this.typeSpec = {} as ITypeSpecification;
+			
+			this.myForm = this.fb.group({
+      							facets: this.fb.array([]),
+    							});
+    							
 			}
 		
+			
 		ngOnInit(): void {
 			this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
 				this.typeSpec = res;
-							this.buildFacetItemsList(this.typeSpec);
-    			this.displayItems();
-			    });
-			    //TODO:GUARDA QUA
-			    this.facetListForm = this.fb.group({
-      							items: this.fb.array([]),
 				});
 				
-		  }
+				for (let ind = 0; ind < this.typeSpec.facetSpecs.length; ind++) {
-		  
+					const fGroup: FormGroup = new FormGroup({});
-		  //TODO: CI VUOLE UN ARRAY DI FORMARRAY
+					let ctrl: FormControl|undefined;
-		    get facetItemsArray() {
+				  		for(let j=0; j<this.typeSpec.facetSpecs[ind].guiProps.length; j++){ 
-    			return <FormArray>this.facetListForm.get('items');
+							const item = this.typeSpec.facetSpecs[ind].guiProps[j];
-  				}
-  				
-			  buildFacetItemsList(globalDesc:ITypeSpecification):void{
-				for (let i=0; i<globalDesc.facetSpecs.length; i++) {
-					this.facetItemsList2D[i] = [];
-					for (let j = 0; j < globalDesc.facetSpecs[i].guiProps.length; j++) {
-						//TODO: VEDI QUA
-						this.facetItemsList2D[i][j]= globalDesc.facetSpecs[i].guiProps[j];
-					}
-				}
-			  }
-		  
-		    displayItems() {
-				let itemFormGroup : FormGroup|any; 
-				//TODO: errore: this.typeSpec.facetSpecs is undefined
-				for (let i = 0; i < this.typeSpec.facetSpecs.length; i++) {
-					  const fs = this.typeSpec.facetSpecs[i];
-						for(let j=0; j<fs.guiProps.length; j++){
-							const item = fs.guiProps[j];
 							  if(item.validations.length===0){
-									    itemFormGroup =  this.fb.group({
+								 ctrl = this.fb.control({
-						      			namefield: ['',item.name, null],
+										name: ['',null]
 									});    
 							}else{
-								    itemFormGroup = this.fb.group({
+								ctrl = this.fb.control({
-						      		namefield: ['',item.name, [Validators.required]],
+								name: ['',Validators.required]
 							});
-							 }
-							 this.facetPropsControls[i][j].setControl('formItem'+String(i)+String(j),this.fb.array(itemFormGroup));
-					}
 						
 			  				}
 			  				
+			  				fGroup.addControl(''+String(j),ctrl);
 						}
-		  
+				this.myForm.addControl('facetGui'+String(ind),fGroup); //AGGIUNGO FORMGROUP PER LA FACET	
-		
-		//crea i formGroup e formControl
-		 createPropsFormItem(item: IFacetGui) {
-			 if(item.validations.length===0){
-					    return this.fb.group({
-		      			namefield: ['',item.name, null],
-		    		});	 
-			 }else{
-				    return this.fb.group({
-		      		namefield: ['',item.name, [Validators.required]],
-		    	});
 		  }
 	}		    
 	
-				//chiude e basta
+	 	get facets() {
+			    return this.myForm.get('facets') as FormArray;
+			  }
+			   
+		  
 		 close():void {
 			        this.dialogRef.close({event:'cancel'});
 			    } 
-					
+		//chiude e basta
 		}		    	  
 					
 
-			 /*   
-		  track(item: any, index: number) {
-			    return index;
-			  }		    
-			    */			  
-		
-		  /*
-		 get itemsArray() {
-		    return <FormArray>this.toDoListForm.get('facetItems');
-		  }*/
-  
-  //TODO: vedi qua
-  //https://copyprogramming.com/howto/typescript-angular-9-programmatically-add-control-to-form
-  /*
-  {
-          "type": "text",
-          "label": "Unit",
-          "name": "unit",
-          "value": "",
-          "validations": [
-            {
-              "name": "pattern",
-              "validator": "pattern",
-              "message": "Wrong field format, required is: ^(Byte|kB|MB|GB|TB|PB|EB|ZB|YB)$"
-            }
-          ],
-          "pattern": null,
-          "propDescription": ""
-        }
-        */
-  
-			    /*
-				  //chiude e passa i dati al component chiamante
-				   doAction():void {
-				        this.dialogRef.close({event:'add',data:this.composerForm.value});
-				    }
-				
-				  
-				  onSubmit():void {
-				    console.log(this.composerForm.value);
-				  }
-  				*/
-