adjusting FormControls, FormArrays and FormGroups
This commit is contained in:
parent
2d4686de68
commit
0850b6cde4
|
|
@ -1,6 +1,8 @@
|
||||||
<h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
|
<h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
|
||||||
|
|
||||||
|
<!-- myForm inizio form globale -->
|
||||||
<mat-dialog-content>
|
<mat-dialog-content>
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>
|
<mat-panel-title>
|
||||||
|
|
@ -12,41 +14,53 @@
|
||||||
</mat-expansion-panel-header>
|
</mat-expansion-panel-header>
|
||||||
<p> {{typeSpec.description}} </p>
|
<p> {{typeSpec.description}} </p>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
<!--inizio form esterna (elenco facet)-->
|
|
||||||
<div *ngFor="let fct of typeSpec.facetSpecs; let ind=index;">
|
<div [formGroup]="myForm">
|
||||||
<mat-expansion-panel>
|
<div formArrayName="facets">
|
||||||
<mat-expansion-panel-header>
|
|
||||||
<mat-panel-title>
|
<div *ngFor="let fct of typeSpec.facetSpecs; let ind=index;">
|
||||||
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
|
<mat-expansion-panel>
|
||||||
<input type="text" value="{{fct.relation}}" disabled="true"/>
|
<mat-expansion-panel-header>
|
||||||
</mat-panel-title>
|
<mat-panel-title>
|
||||||
<mat-panel-description>
|
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
|
||||||
{{fct.name}}
|
<input type="text" value="{{typeSpec.facetSpecs[ind].relation}}" disabled="true"/>
|
||||||
</mat-panel-description>
|
</mat-panel-title>
|
||||||
</mat-expansion-panel-header>
|
<mat-panel-description>
|
||||||
<p>{{fct.description}}</p>
|
{{typeSpec.facetSpecs[ind].name}}
|
||||||
<div style="border: 1px solid blue; padding: 10px; margin: 5px;">
|
</mat-panel-description>
|
||||||
formGroup per la facet {{ind}}:<br>
|
</mat-expansion-panel-header>
|
||||||
<!--
|
<p>{{typeSpec.facetSpecs[ind].description}}</p>
|
||||||
<br> ******** <br>
|
|
||||||
{{fct.guiProps[0]|json}}
|
<!-- OK SO FAR -->
|
||||||
<br> ******** <br>
|
<p>group {{ind}}</p>
|
||||||
{{fct.guiProps[1]|json}}
|
<div formArrayName="facetProps" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
|
||||||
<br>
|
<div formGroupName="ind">
|
||||||
-->
|
<div *ngFor="let facet of facetProps.controls; let i=index" >
|
||||||
<div *ngFor="let x of facetItemsArray.controls; let i=index;" [formGroupName]="i">
|
<p> control {{i}} - <label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
|
||||||
<label>{{facetItemsList2D[ind][i].label}}</label>
|
<input formControlName="name" type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
|
||||||
<input formControlName="'formItem'+String(ind)+String(i)" type="{{fct.guiProps[i].type}}" placehoder=""/>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-expansion-panel>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</mat-expansion-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <button mat-button (click)="doAction()">Save Form</button> -->
|
||||||
|
<!--</form>-->
|
||||||
<!--fine form esterna-->
|
<!--fine form esterna-->
|
||||||
|
|
||||||
|
|
||||||
</mat-dialog-content>
|
</mat-dialog-content>
|
||||||
|
|
||||||
<mat-dialog-actions align="end">
|
<mat-dialog-actions align="end">
|
||||||
<button mat-button (click)="close()">Cancel</button>
|
<button mat-button (click)="close()">Cancel</button>
|
||||||
<!-- <button mat-button (click)="doAction()">Save</button> -->
|
|
||||||
</mat-dialog-actions>
|
</mat-dialog-actions>
|
||||||
|
<!--fine form esterna-->
|
||||||
|
|
@ -12,7 +12,6 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatInputModule } from '@angular/material/input';
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { MatExpansionModule } from '@angular/material/expansion';
|
import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
import { IFacetProp } from 'app/services/i-facet';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -32,22 +31,10 @@ export class FacetComposerComponent implements OnInit {
|
||||||
titleType: string;
|
titleType: string;
|
||||||
titlePath: string;
|
titlePath: string;
|
||||||
|
|
||||||
facetListForm: FormGroup | any ; //form complessiva
|
myForm: FormGroup ; //form complessiva
|
||||||
|
|
||||||
typeSpec: ITypeSpecification;
|
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
|
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||||
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
||||||
|
|
@ -56,123 +43,52 @@ export class FacetComposerComponent implements OnInit {
|
||||||
this.titleType = data.type.name;
|
this.titleType = data.type.name;
|
||||||
this.titlePath = data.context.path;
|
this.titlePath = data.context.path;
|
||||||
this.typeSpec = {} as ITypeSpecification;
|
this.typeSpec = {} as ITypeSpecification;
|
||||||
}
|
|
||||||
|
this.myForm = this.fb.group({
|
||||||
ngOnInit(): void {
|
facets: this.fb.array([]),
|
||||||
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([]),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
//TODO: CI VUOLE UN ARRAY DI FORMARRAY
|
|
||||||
get facetItemsArray() {
|
|
||||||
return <FormArray>this.facetListForm.get('items');
|
|
||||||
}
|
|
||||||
|
|
||||||
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({
|
|
||||||
namefield: ['',item.name, null],
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
itemFormGroup = this.fb.group({
|
|
||||||
namefield: ['',item.name, [Validators.required]],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.facetPropsControls[i][j].setControl('formItem'+String(i)+String(j),this.fb.array(itemFormGroup));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//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
|
|
||||||
close():void {
|
|
||||||
this.dialogRef.close({event:'cancel'});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
track(item: any, index: number) {
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
get itemsArray() {
|
ngOnInit(): void {
|
||||||
return <FormArray>this.toDoListForm.get('facetItems');
|
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
||||||
}*/
|
this.typeSpec = res;
|
||||||
|
});
|
||||||
//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});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
for (let ind = 0; ind < this.typeSpec.facetSpecs.length; ind++) {
|
||||||
onSubmit():void {
|
const fGroup: FormGroup = new FormGroup({});
|
||||||
console.log(this.composerForm.value);
|
let ctrl: FormControl|undefined;
|
||||||
}
|
for(let j=0; j<this.typeSpec.facetSpecs[ind].guiProps.length; j++){
|
||||||
*/
|
const item = this.typeSpec.facetSpecs[ind].guiProps[j];
|
||||||
|
if(item.validations.length===0){
|
||||||
|
ctrl = this.fb.control({
|
||||||
|
name: ['',null]
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
ctrl = this.fb.control({
|
||||||
|
name: ['',Validators.required]
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
fGroup.addControl(''+String(j),ctrl);
|
||||||
|
}
|
||||||
|
this.myForm.addControl('facetGui'+String(ind),fGroup); //AGGIUNGO FORMGROUP PER LA FACET
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get facets() {
|
||||||
|
return this.myForm.get('facets') as FormArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
close():void {
|
||||||
|
this.dialogRef.close({event:'cancel'});
|
||||||
|
}
|
||||||
|
//chiude e basta
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue