replace data form group instead of entire form

frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.ts

@@ -88,7 +88,6 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
 		this.form.valueChanges.pipe(takeUntil(this._destroyed)).subscribe(changes => {
 			this.previewDirty = true;
 			this.generatePreviewForm();
-
 		});
 		this.previewSubject$
 			.pipe(debounceTime(600))
@@ -149,7 +148,7 @@ export class DescriptionTemplateEditorFieldSetComponent extends BaseComponent im
 				data: editorField.data
 			} as DescriptionTemplateField;
 
-			if (editorField.data.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) {
+			if (editorField.data?.fieldType === DescriptionTemplateFieldType.REFERENCE_TYPES) {
 				convertedField.data = editorField.data;
 				let selectedReferenceType: ReferenceType = this.availableReferenceTypes.find(referenceType => referenceType.id == (editorField.data as DescriptionTemplateReferenceTypeFieldPersist).referenceTypeId);
 				(convertedField.data as DescriptionTemplateReferenceTypeData).referenceType = {

frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.html

@@ -6,12 +6,12 @@
 		<div class="col-auto">
 			<ul class="list-unstyled list-inline d-flex align-items-center">
 				<li class="list-inline-item">
-					<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType || form.disabled">
+					<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType?.value || form.disabled">
 						{{'GENERAL.VALIDATION.REQUIRED' | translate}}
 					</mat-slide-toggle>
 				</li>
 				<li *ngIf="fieldType === descriptionTemplateFieldTypeEnum.FREE_TEXT" class="list-inline-item">
-					<mat-slide-toggle class="field-toggler" [checked]="isURL" (change)="toggleURL($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType || form.disabled">
+					<mat-slide-toggle class="field-toggler" [checked]="isURL" (change)="toggleURL($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType?.value || form.disabled">
 						{{'GENERAL.VALIDATION.URL.LABEL' | translate}}
 					</mat-slide-toggle>
 				</li>
@@ -28,7 +28,7 @@
 			<mat-form-field class="w-100">
 
 				<!-- NEW VERSION -->
-				<mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="fieldType" (selectionChange)="onInputTypeChange()" [disabled]="viewOnly" [errorStateMatcher]="this">
+				<mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="fieldType" [errorStateMatcher]="this">
 					<mat-select-trigger>
 						{{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}}
 					</mat-select-trigger>
@@ -130,7 +130,7 @@
 		</ng-container>
 		
 		<div class="col-auto">
-			<mat-checkbox [formControl]="this.form.get('includeInExport')" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXPORT' | translate}}</mat-checkbox>
+			<mat-checkbox [formControl]="this.form.get('includeInExport')">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD-SET.FIELDS.EXPORT' | translate}}</mat-checkbox>
 			<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error>
 		</div>
 		

frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.ts

@@ -23,10 +23,27 @@ import { takeUntil } from 'rxjs';
 })
 export class DescriptionTemplateEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
 	@Input() viewOnly: boolean;
-	@Input() form: UntypedFormGroup;
+
+    private _form: UntypedFormGroup;
+	@Input() set form(val: UntypedFormGroup){
+        if(val){
+            this._form = val;
+            this.reApplyValueChanges();
+        }
+    }
+    get form(): UntypedFormGroup {
+        return this._form;
+    }
+
+    reApplyValueChanges() {
+        this.form.get('data').get('fieldType').valueChanges
+        .pipe(takeUntil(this._destroyed))
+        .subscribe((fieldType) => {
+            this.onInputTypeChange(fieldType);
+        })
+    }
 	validationTypeEnum = ValidationType;
 
-	fieldType: DescriptionTemplateFieldType;
 	descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType;
 
 	@Input() expandView: boolean = true;
@@ -60,13 +77,16 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 
 		const fieldType = this.form.get('data').get('fieldType').value;
 		if (fieldType) {
-			this.fieldType = fieldType;
+			if (fieldType !== DescriptionTemplateFieldType.FREE_TEXT) {
-			if (this.fieldType !== DescriptionTemplateFieldType.FREE_TEXT) {
 				this.setValidator(ValidationType.URL, false);
 			}
 		}
 	}
 
+    get fieldType() {
+        return this.form?.get('data')?.get('fieldType');
+    }
+
 	private clearVisibilityRulesValue() {
 		(this.form.get('visibilityRules') as UntypedFormArray).controls?.forEach(
 			(visibilityRule, index) => {
@@ -85,7 +105,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 
 	get canApplyVisibility(): boolean {
 
-		switch (this.fieldType) {
+		switch (this.fieldType?.value) {
 			case DescriptionTemplateFieldType.TEXT_AREA:
 			case DescriptionTemplateFieldType.RICH_TEXT_AREA:
 			case DescriptionTemplateFieldType.FREE_TEXT:
@@ -99,19 +119,22 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 		return false;
 	}
 
-	onInputTypeChange() {
+	onInputTypeChange(type: DescriptionTemplateFieldType) {
-
-		const type = this.fieldType;
 
 		const field: DescriptionTemplateFieldPersist = this.form.getRawValue();
-		field.defaultValue = {
+        field.data.fieldType = type;
-			booleanValue: null,
+
-			dateValue: null,
-			textValue: null,
-		};
         if (!this.canApplyVisibility) {
-			field.visibilityRules = [];
+			this.form.get('visibilityRules').reset();
 		}
+		// field.defaultValue = {
+		// 	booleanValue: null,
+		// 	dateValue: null,
+		// 	textValue: null,
+		// };
+		// if (!this.canApplyVisibility) {
+		// 	field.visibilityRules = [];
+		// }
 
 		switch (type) {
 			case DescriptionTemplateFieldType.REFERENCE_TYPES: {
@@ -120,7 +143,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
-				field.defaultValue = null;
+				this.form.get('defaultValue').reset();
 				break;
 			}
 			case DescriptionTemplateFieldType.RADIO_BOX: {
@@ -130,6 +153,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
+                this.form.get('defaultValue').patchValue({
+                    booleanValue: null,
+                    dateValue: null,
+                    textValue: null,
+                })
 				break;
 			}
 			case DescriptionTemplateFieldType.SELECT: {
@@ -141,6 +169,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
+                this.form.get('defaultValue').patchValue({
+                    booleanValue: null,
+                    dateValue: null,
+                    textValue: null,
+                })
 				break;
 			}
 			case DescriptionTemplateFieldType.BOOLEAN_DECISION:
@@ -154,6 +187,11 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
+                this.form.get('defaultValue').patchValue({
+                    booleanValue: null,
+                    dateValue: null,
+                    textValue: null,
+                })
 
 				break;
 			}
@@ -165,8 +203,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
-				field.defaultValue = null;
+				this.form.get('defaultValue').reset();
-
 				break;
 			}
 			case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS:
@@ -177,7 +214,7 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
-				field.defaultValue = null;
+				this.form.get('defaultValue').reset();
 				break;
 			}
 			case DescriptionTemplateFieldType.UPLOAD: {
@@ -188,31 +225,37 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 					fieldType: type
 				}
 				field.data = data;
-				field.defaultValue = null;
+				this.form.get('defaultValue').reset();
 				break;
 			}
 		}
 
+        // const dataEditorModel = DescriptionTemplateFieldEditorModel.getFieldEditorModel(field.data.fieldType, this.validationErrorModel).fromModel(field.data);
+
 		const form = (new DescriptionTemplateFieldEditorModel(this.validationErrorModel)).fromModel(field)
 			.buildForm({rootPath: this.validationRootPath});
         
+        this.form.setControl('data', form.controls.data)
         
-		const fields = this.form.parent as UntypedFormArray;
+        this.reApplyValueChanges();
-		let index = -1;
-
-		fields.controls.forEach((control, i) => {
-			if (this.form.get('id').value === control.get('id').value) {
-				index = i
-			}
-		});
-		if (index >= 0) {
-			fields.removeAt(index);
-			fields.insert(index, form);
-			this.form = form;
-
-
-		}
         this.clearVisibilityRulesValue();
+
+
+		// const fields = this.form.parent as UntypedFormArray;
+		// let index = -1;
+
+		// fields.controls.forEach((control, i) => {
+		// 	if (this.form.get('id').value === control.get('id').value) {
+		// 		index = i
+		// 	}
+		// });
+		// if (index >= 0) {
+		// 	fields.removeAt(index);
+		// 	fields.insert(index, form);
+		// 	this.form = form;
+
+
+		// }
 	}
 
 
@@ -240,12 +283,14 @@ export class DescriptionTemplateEditorFieldComponent extends BaseComponent imple
 	}
 
 	get isRequired() {
+        if(!this.form?.get('validations')?.value ){ return;}
 		let validationsControl = this.form.get('validations') as UntypedFormControl;
-		let validations: Array<ValidationType> = validationsControl.value;
+		let validations: Array<ValidationType> = validationsControl?.value;
-		return validations.includes(ValidationType.Required);
+		return validations?.includes(ValidationType.Required);
 	}
 
 	get isURL() {
+        if(!this.form?.get('validations')?.value ){ return;}
 		let validationsControl = this.form.get('validations') as UntypedFormControl;
 		let validations: Array<ValidationType> = validationsControl.value;
 		return validations.includes(ValidationType.URL);

frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts

@@ -793,7 +793,7 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
 			this.validations = item.validations;
 			this.includeInExport = item.includeInExport;
 
-			this.data = this.getFieldEditorModel(item.data.fieldType).fromModel(item.data);
+			this.data = DescriptionTemplateFieldEditorModel.getFieldEditorModel(item.data.fieldType, this.validationErrorModel).fromModel(item.data);
 			if (item.visibilityRules) { item.visibilityRules.map(x => this.visibilityRules.push(new DescriptionTemplateRuleEditorModel(this.validationErrorModel).fromModel(x))); }
 		}
 		return this;
@@ -857,14 +857,14 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
 		return baseContext;
 	}
 
-	private getFieldEditorModel(fieldType: DescriptionTemplateFieldType): DescriptionTemplateLabelDataEditorModel {
+	static getFieldEditorModel(fieldType: DescriptionTemplateFieldType, validationErrorModel: ValidationErrorModel = new ValidationErrorModel()): DescriptionTemplateLabelDataEditorModel {
 		switch (fieldType) {
 			case DescriptionTemplateFieldType.REFERENCE_TYPES:
-				return new DescriptionTemplateReferenceTypeDataEditorModel(this.validationErrorModel);
+				return new DescriptionTemplateReferenceTypeDataEditorModel(validationErrorModel);
 			case DescriptionTemplateFieldType.RADIO_BOX:
-				return new DescriptionTemplateRadioBoxDataEditorModel(this.validationErrorModel);
+				return new DescriptionTemplateRadioBoxDataEditorModel(validationErrorModel);
 			case DescriptionTemplateFieldType.SELECT:
-				return new DescriptionTemplateSelectDataEditorModel(this.validationErrorModel);
+				return new DescriptionTemplateSelectDataEditorModel(validationErrorModel);
 			case DescriptionTemplateFieldType.BOOLEAN_DECISION:
 			case DescriptionTemplateFieldType.CHECK_BOX:
 			case DescriptionTemplateFieldType.FREE_TEXT:
@@ -874,12 +874,12 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
 			case DescriptionTemplateFieldType.TAGS:
 			case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
 			case DescriptionTemplateFieldType.VALIDATION:
-				return new DescriptionTemplateLabelDataEditorModel(this.validationErrorModel);
+				return new DescriptionTemplateLabelDataEditorModel(validationErrorModel);
 			case DescriptionTemplateFieldType.INTERNAL_ENTRIES_PLANS:
 			case DescriptionTemplateFieldType.INTERNAL_ENTRIES_DESCRIPTIONS:
-				return new DescriptionTemplateLabelAndMultiplicityDataEditorModel(this.validationErrorModel);
+				return new DescriptionTemplateLabelAndMultiplicityDataEditorModel(validationErrorModel);
 			case DescriptionTemplateFieldType.UPLOAD:
-				return new DescriptionTemplateUploadDataEditorModel(this.validationErrorModel);
+				return new DescriptionTemplateUploadDataEditorModel(validationErrorModel);
 		}
 	}
 
@@ -960,13 +960,11 @@ export class DescriptionTemplateFieldEditorModel implements DescriptionTemplateF
 }
 
 export interface DescriptionTemplateDefaultValueForm {
-    target: FormControl<string>;
 	textValue: FormControl<string>;
 	dateValue: FormControl<Date>;
 	booleanValue: FormControl<boolean>;
 }
 export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTemplateDefaultValuePersist {
-	target: string;
 	textValue: string;
 	dateValue: Date;
 	booleanValue: boolean;
@@ -1034,7 +1032,7 @@ export class DescriptionTemplateDefaultValueEditorModel implements DescriptionTe
 			validationErrorModel
 		});
 
-		['target', 'textValue', 'dateValue', 'booleanValue'].forEach(keyField => {
+		['textValue', 'dateValue', 'booleanValue'].forEach(keyField => {
 			const control = formGroup?.get(keyField);
 			control?.clearValidators();
 			control?.addValidators(context.getValidation(keyField).validators);

frontend/src/app/ui/description/editor/description-editor.model.ts

@@ -537,6 +537,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 		visibilityRulesKey: string
 	}): UntypedFormGroup {
 		let { context = null, disabled = false, rootPath } = params ?? {}
+
 		if (context == null) {
 			context = DescriptionFieldEditorModel.createValidationContext({
 				validationErrorModel: this.validationErrorModel,
@@ -630,7 +631,6 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 		visibilityRulesService: VisibilityRulesService,
 		visibilityRulesKey: string
 	}): void {
-
         const { formGroup, rootPath, validationErrorModel, fieldDefinition } = params;
 		const context = DescriptionFieldEditorModel.createValidationContext({
 			rootPath,