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>
|
||||
|
||||
<!-- 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 *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"/>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{fct.name}}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p>{{fct.description}}</p>
|
||||
<div style="border: 1px solid blue; padding: 10px; margin: 5px;">
|
||||
formGroup per la facet {{ind}}:<br>
|
||||
<!--
|
||||
<br> ******** <br>
|
||||
{{fct.guiProps[0]|json}}
|
||||
<br> ******** <br>
|
||||
{{fct.guiProps[1]|json}}
|
||||
<br>
|
||||
-->
|
||||
<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>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
|
||||
<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="{{typeSpec.facetSpecs[ind].relation}}" disabled="true"/>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{typeSpec.facetSpecs[ind].name}}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p>{{typeSpec.facetSpecs[ind].description}}</p>
|
||||
|
||||
<!-- OK SO FAR -->
|
||||
<p>group {{ind}}</p>
|
||||
<div formArrayName="facetProps" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
|
||||
<div formGroupName="ind">
|
||||
<div *ngFor="let facet of facetProps.controls; let i=index" >
|
||||
<p> control {{i}} - <label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
|
||||
<input formControlName="name" type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
|
||||
</p>
|
||||
</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-->
|
||||
|
|
@ -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,22 +31,10 @@ 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
|
||||
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
||||
|
|
@ -56,123 +43,52 @@ export class FacetComposerComponent implements OnInit {
|
|||
this.titleType = data.type.name;
|
||||
this.titlePath = data.context.path;
|
||||
this.typeSpec = {} as ITypeSpecification;
|
||||
}
|
||||
|
||||
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([]),
|
||||
|
||||
this.myForm = this.fb.group({
|
||||
facets: 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() {
|
||||
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});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
||||
this.typeSpec = res;
|
||||
});
|
||||
|
||||
|
||||
onSubmit():void {
|
||||
console.log(this.composerForm.value);
|
||||
}
|
||||
*/
|
||||
|
||||
for (let ind = 0; ind < this.typeSpec.facetSpecs.length; ind++) {
|
||||
const fGroup: FormGroup = new FormGroup({});
|
||||
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