dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts

@@ -118,7 +118,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		this.stateChanges.next();
 	}
 
-	private _required;
+	private _required = false;
 
 	@Input()
 	get disabled() {

dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts

@@ -85,7 +85,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
 		this._required = !!(req);
 		this.stateChanges.next();
 	}
-	private _required;
+	private _required = false;
 
 	@Input()
 	get disabled() { return this._disabled; }

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

@@ -557,10 +557,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 			case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
 			case DescriptionTemplateFieldType.VALIDATION:
 				formGroup.addControl(fieldValueControlName, this.externalIdentifier.buildForm({
-					rootPath: `${rootPath}externalIdentifier.`,
+					rootPath: `${rootPath}externalIdentifier.`
-					fieldDefinition: this.fieldDefinition,
-					visibilityRulesService: params.visibilityRulesService,
-					visibilityRulesKey: params.visibilityRulesKey
 				}));
 			case DescriptionTemplateFieldType.DATE_PICKER:
 				formGroup.addControl(fieldValueControlName, new FormControl({ value: this.dateValue, disabled: disabled }, context.getValidation(fieldValueControlName).validators));
@@ -646,10 +643,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
 		DescriptionExternalIdentifierEditorModel.reapplyValidators({
 			formGroup: formGroup?.get('externalIdentifier') as UntypedFormGroup,
 			rootPath: `${rootPath}externalIdentifier.`,
-			validationErrorModel: validationErrorModel,
+			validationErrorModel: validationErrorModel
-			fieldDefinition: params.fieldDefinition,
-			visibilityRulesService: params.visibilityRulesService,
-			visibilityRulesKey: params.visibilityRulesKey
 		});
 	}
 }
@@ -675,19 +669,13 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
 	buildForm(params?: {
 		context?: ValidationContext,
 		disabled?: boolean,
-		rootPath?: string,
+		rootPath?: string
-		fieldDefinition: DescriptionTemplateField,
-		visibilityRulesService: VisibilityRulesService,
-		visibilityRulesKey: string
 	}): UntypedFormGroup {
 		let { context = null, disabled = false, rootPath } = params ?? {}
 		if (context == null) {
 			context = DescriptionExternalIdentifierEditorModel.createValidationContext({
 				validationErrorModel: this.validationErrorModel,
-				rootPath,
+				rootPath
-				fieldDefinition: params.fieldDefinition,
-				visibilityRulesService: params.visibilityRulesService,
-				visibilityRulesKey: params.visibilityRulesKey
 			});
 		}
 
@@ -699,30 +687,14 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
 
 	static createValidationContext(params: {
 		rootPath?: string,
-		validationErrorModel: ValidationErrorModel,
+		validationErrorModel: ValidationErrorModel
-		fieldDefinition: DescriptionTemplateField,
-		visibilityRulesService: VisibilityRulesService,
-		visibilityRulesKey: string
 	}): ValidationContext {
 		const { rootPath = '', validationErrorModel } = params;
 
 		const baseContext: ValidationContext = new ValidationContext();
 		const baseValidationArray: Validation[] = new Array<Validation>();
-
+		baseValidationArray.push({ key: 'identifier', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}identifier`)] });
-		let validators = [];
+		baseValidationArray.push({ key: 'type', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}type`)] });
-		validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}identifier`));
-		if (params.fieldDefinition?.validations?.includes(DescriptionTemplateFieldValidationType.Required)) {
-			validators.push(RequiredWithVisibilityRulesValidator(params.visibilityRulesService, params.visibilityRulesKey));
-		}
-		baseValidationArray.push({ key: 'identifier', validators: validators });
-
-		validators = [];
-		validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}type`));
-		if (params.fieldDefinition?.validations?.includes(DescriptionTemplateFieldValidationType.Required)) {
-			validators.push(RequiredWithVisibilityRulesValidator(params.visibilityRulesService, params.visibilityRulesKey));
-		}
-		baseValidationArray.push({ key: 'type', validators: validators });
-
 		baseContext.validation = baseValidationArray;
 		return baseContext;
 	}
@@ -730,19 +702,13 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
 	static reapplyValidators(params: {
 		formGroup: UntypedFormGroup,
 		validationErrorModel: ValidationErrorModel,
-		rootPath: string,
+		rootPath: string
-		fieldDefinition: DescriptionTemplateField,
-		visibilityRulesService: VisibilityRulesService,
-		visibilityRulesKey: string
 	}): void {
 
 		const { formGroup, rootPath, validationErrorModel } = params;
 		const context = DescriptionExternalIdentifierEditorModel.createValidationContext({
 			rootPath,
-			validationErrorModel,
+			validationErrorModel
-			fieldDefinition: params.fieldDefinition,
-			visibilityRulesService: params.visibilityRulesService,
-			visibilityRulesKey: params.visibilityRulesKey
 		});
 
 		['identifier', 'type'].forEach(keyField => {
@@ -812,19 +778,13 @@ export class DescriptionReferenceEditorModel implements DescriptionReferencePers
 	static reapplyValidators(params: {
 		formGroup: UntypedFormGroup,
 		validationErrorModel: ValidationErrorModel,
-		rootPath: string,
+		rootPath: string
-		fieldDefinition: DescriptionTemplateField,
-		visibilityRulesService: VisibilityRulesService,
-		visibilityRulesKey: string
 	}): void {
 
 		const { formGroup, rootPath, validationErrorModel } = params;
 		const context = DescriptionExternalIdentifierEditorModel.createValidationContext({
 			rootPath,
-			validationErrorModel,
+			validationErrorModel
-			fieldDefinition: params.fieldDefinition,
-			visibilityRulesService: params.visibilityRulesService,
-			visibilityRulesKey: params.visibilityRulesKey
 		});
 
 		['id', 'reference'].forEach(keyField => {

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html

@@ -11,7 +11,7 @@
 		<div class="col-12">
 			<mat-form-field class="w-100">
 				<mat-label>{{ field.data.label }}</mat-label>
-				<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')">
+				<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}">
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('pattern')">{{'GENERAL.VALIDATION.URL.MESSAGE' | translate}}</mat-error>
@@ -21,35 +21,31 @@
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES" class="col-12">
 		<ng-container *ngIf="field.data.multipleSelect">
-			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="field.data.label" [placeholder]="field.data.label" [referenceType]="field.data.referenceType" [multiple]="true" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('references')" [label]="(field.data.label | translate)" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="true" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
 		</ng-container>
 		<ng-container *ngIf="!(field.data.multipleSelect)">
-			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="field.data.label" [placeholder]="field.data.label" [referenceType]="field.data.referenceType" [multiple]="false" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
+			<app-reference-field-component [form]="propertiesFormGroup?.get(field.id).get('reference')" [label]="(field.data.label | translate)" [placeholder]="(field.data.label | translate) + (isRequired ? ' *': '')" [referenceType]="field.data.referenceType" [multiple]="false" [required]="isRequired" hint="{{ 'TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT' | translate }}"></app-reference-field-component>
 		</ng-container>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
 		<div class="row">
-			<ng-container *ngIf="field.data.multipleSelect">
 			<mat-form-field class="col-md-12">
-					<mat-label>{{ field.data.label }}</mat-label>
+				<ng-container *ngIf="field.data.multipleSelect">
-					<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [multiple]="field.data.multipleSelect">
+					<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect">
 						<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</mat-option>
 					</mat-select>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}}</mat-error>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</mat-form-field>
 				</ng-container>
 				<ng-container *ngIf="!(field.data.multipleSelect)">
-				<mat-form-field class="col-md-12">
+					<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect">
-					<mat-label>{{ field.data.label }}</mat-label>
-					<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [multiple]="field.data.multipleSelect">
 						<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}
 						</mat-option>
 					</mat-select>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-				</mat-form-field>
 				</ng-container>
+			</mat-form-field>
 		</div>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS" class="col-12">
@@ -57,7 +53,7 @@
 			<ng-container *ngIf="field.data.multipleSelect">
 				<mat-form-field class="col-md-12">
 					<mat-label>{{ field.data.label }}</mat-label>
-					<app-multiple-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="descriptionService.multipleAutocompleteConfiguration">
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="descriptionService.multipleAutocompleteConfiguration">
 					</app-multiple-auto-complete>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}}</mat-error>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@@ -67,7 +63,7 @@
 			<ng-container *ngIf="!(field.data.multipleSelect)">
 				<mat-form-field class="col-md-12">
 					<mat-label>{{ field.data.label }}</mat-label>
-					<app-single-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="descriptionService.singleAutocompleteConfiguration">
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="descriptionService.singleAutocompleteConfiguration">
 					</app-single-auto-complete>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@@ -81,7 +77,7 @@
 			<ng-container *ngIf="field.data.multipleSelect">
 				<mat-form-field class="col-md-12">
 					<mat-label>{{ field.data.label }}</mat-label>
-					<app-multiple-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="dmpService.multipleAutocompleteConfiguration">
+					<app-multiple-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="dmpService.multipleAutocompleteConfiguration">
 					</app-multiple-auto-complete>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}}</mat-error>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@@ -91,7 +87,7 @@
 			<ng-container *ngIf="!(field.data.multipleSelect)">
 				<mat-form-field class="col-md-12">
 					<mat-label>{{ field.data.label }}</mat-label>
-					<app-single-auto-complete [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="dmpService.singleAutocompleteConfiguration">
+					<app-single-auto-complete placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="dmpService.singleAutocompleteConfiguration">
 					</app-single-auto-complete>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}}</mat-error>
 					<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('textValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@@ -109,7 +105,7 @@
 	<div class="col-12">
 		<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="w-100">
 			<mat-label>{{ field.data.label }}</mat-label>
-			<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15"></textarea>
+			<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
 			<button mat-icon-button type="button" *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').disabled && propertiesFormGroup?.get(field.id).get('textValue').value" matSuffix aria-label="Clear" (click)="this.propertiesFormGroup?.get(field.id).get('textValue').patchValue('')">
 				<mat-icon>close</mat-icon>
 			</button>
@@ -142,7 +138,7 @@
 		<div class="col-12 d-flex justify-content-center attach-btn">
 			<button *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" [disabled]="!!propertiesFormGroup?.get(field.id).get('textValue').value || propertiesFormGroup?.get(field.id).get('textValue').disabled">
 				<mat-icon class="mr-2">upload</mat-icon>
-				<mat-label>{{field.data.label}}</mat-label>
+				<mat-label>{{ (field.data.label | translate)}}</mat-label>
 			</button>
 
 			<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn">
@@ -174,7 +170,7 @@
 
 	<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12">
 		<mat-label>{{ field.data.label }}</mat-label>
-		<input matInput class="table-input" [matDatepicker]="date" [formControl]="propertiesFormGroup?.get(field.id).get('dateValue')">
+		<input matInput placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" class="table-input" [matDatepicker]="date" [formControl]="propertiesFormGroup?.get(field.id).get('dateValue')">
 		<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
 		<mat-datepicker #date></mat-datepicker>
 		<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('dateValue').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
@@ -182,20 +178,20 @@
 	</mat-form-field>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12">
-		<app-tags-field-component [label]="field.data.label" [placeholder]="field.data.label" [form]="propertiesFormGroup?.get(field.id).get('tags')"></app-tags-field-component>
+		<app-tags-field-component [label]="field.data.label" [placeholder]="(field.data.label | translate) + (isRequired? ' *': '')" [form]="propertiesFormGroup?.get(field.id).get('tags')"></app-tags-field-component>
 	</div>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
-		<div class="row">
+		<div class="row" *ngIf="datasetIdInitialized">
 			<mat-form-field class="col-md-12">
 				<mat-label>{{ field.data.label }}</mat-label>
-				<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')">
+				<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}}</mat-error>
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 			</mat-form-field>
 			<mat-form-field class="col-md-12">
 				<mat-label>{{ field.data.label }}</mat-label>
-				<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')">
+				<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (isRequired? ' *': '')" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type').disabled">
 					<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
 						{{ type.name }}
 					</mat-option>
@@ -210,13 +206,13 @@
 		<div class="row align-items-baseline">
 			<mat-form-field class="col-md-4">
 				<mat-label>{{ field.data.label }}</mat-label>
-				<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')">
+				<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}">
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}}</mat-error>
 				<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 			</mat-form-field>
 			<mat-form-field class="col-md-4">
 				<mat-label>{{ field.data.label }}</mat-label>
-				<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="'TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate">
+				<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="('TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate) + (isRequired? ' *': '')">
 					<mat-option *ngFor="let type of validationTypes" [value]="type.value">
 						{{ type.name }}
 					</mat-option>

dmp-frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts

@@ -60,6 +60,8 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
+	datasetIdInitialized: boolean = false;
+
 	validationIcon;
 
 	readonly datasetIdTypes: any[] = [
@@ -125,6 +127,35 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 	private applyFieldType(){
 		this.isRequired = this.field.validations?.includes(DescriptionTemplateFieldValidationType.Required);
 
+		switch (this.field?.data?.fieldType) {
+
+			case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
+				// const value = this.propertiesFormGroup.get(this.field.id).get('value').value;
+				// const disabled = this.propertiesFormGroup.get(this.field.id).disabled;
+				//TODO: Refactor this.
+				// this.form.removeControl('value');
+				// this.form.addControl('value', new DatasetIdModel(value).buildForm());
+				// if (disabled) {
+				// 	this.form.disable();
+				// }
+				this.datasetIdInitialized = true;
+				break;
+			case DescriptionTemplateFieldType.VALIDATION:
+				// const value1 = this.propertiesFormGroup.get(this.field.id).get('value').value;
+				// const disabled1 = this.propertiesFormGroup.get(this.field.id).disabled;
+				//TODO: Refactor this.
+				// this.form.removeControl('value');
+				// this.form.addControl('value', new DatasetIdModel(value1).buildForm());
+				// if (disabled1) {
+				// 	this.form.disable();
+				// }
+				break;
+
+		}
+
+		// this.form = this.visibilityRulesService.getFormGroup(this.field.id);
+
+		//TODO: refactor
 		this.propertiesFormGroup.get(this.field.id).valueChanges
 			.pipe(
 				takeUntil(this._destroyed),

dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import {ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { AbstractControl, FormControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
 import { BaseComponent } from '@common/base/base.component';
-import { MarkedValidatorFn } from '@common/forms/validation/custom-validator';
 import { takeUntil } from 'rxjs/operators';
-import { nameof } from 'ts-simple-nameof';
 import { DescriptionEditorModel } from '../description-editor.model';
+import { nameof } from 'ts-simple-nameof';
+import { BackendErrorValidator, MarkedValidatorFn } from '@common/forms/validation/custom-validator';
 
 @Component({
 	selector: 'app-form-progress-indication',

dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.html

@@ -1,6 +1,6 @@
 <mat-form-field class="w-100" *ngIf="multipleAutoCompleteSearchConfiguration">
 	<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
-	<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
+	<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration" [required]="required">
 	</app-multiple-auto-complete>
 	<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
 	<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@@ -12,7 +12,7 @@
 </mat-form-field>
 <mat-form-field class="w-100" *ngIf="singleAutoCompleteSearchConfiguration">
 	<mat-label>{{label?.length > 0 ? label : referenceType?.name}}</mat-label>
-	<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
+	<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration" [required]="required">
 	</app-single-auto-complete>
 	<mat-error *ngIf="form.hasError('backendError')">{{form.getError('backendError').message}}</mat-error>
 	<mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>

dmp-frontend/src/app/utilities/enhancers/utils.ts

@@ -49,4 +49,4 @@ Object.defineProperty(Array.prototype, 'firstSafe', {
 	value() {
 		return this.find(e => true)     // or this.find(Boolean)
 	}
-});
+})

dmp-frontend/src/common/forms/common-forms.module.ts

@@ -2,25 +2,19 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PendingChangesGuard } from '@common/forms/pending-form-changes/pending-form-changes-guard.service';
 import { FormService } from './form-service';
-import { ReactiveAsteriskDirective } from './reactive-asterisk-directive';
 
 @NgModule({
 	imports: [
 		FormsModule,
 		ReactiveFormsModule,
 	],
-	declarations:[
-		ReactiveAsteriskDirective,
-	],
 	exports: [
 		FormsModule,
 		ReactiveFormsModule,
-		ReactiveAsteriskDirective,
 	],
 	providers: [
 		FormService,
-		PendingChangesGuard,
+		PendingChangesGuard
-		ReactiveAsteriskDirective,
 	]
 })
 export class CommonFormsModule { }

dmp-frontend/src/common/forms/reactive-asterisk-directive.ts

@@ -1,34 +0,0 @@
-import { AfterContentChecked, Directive } from "@angular/core";
-import { AbstractControl } from "@angular/forms";
-import { MatFormField } from "@angular/material/form-field";
-import { MatInput } from "@angular/material/input";
-import { MatSelect } from "@angular/material/select";
-import { MultipleAutoCompleteComponent } from "@app/library/auto-complete/multiple/multiple-auto-complete.component";
-import { SingleAutoCompleteComponent } from "@app/library/auto-complete/single/single-auto-complete.component";
-import { MarkedValidatorFn } from "./validation/custom-validator";
-
-/**
- * Input/Select into FormField consider Validator.required from reactive form if the [required] attribute is missing in the template
- */
-@Directive({
-	selector: 'mat-form-field:has(input:not([required])), mat-form-field:has(mat-select:not([required])), mat-form-field:has(app-multiple-auto-complete:not([required])), mat-form-field:has(app-single-auto-complete:not([required]))',
-})
-export class ReactiveAsteriskDirective implements AfterContentChecked {
-	private readonly requiredValidatornames = ['RequiredWithVisibilityRulesValidator', 'required'];
-	constructor(private matFormField: MatFormField) { }
-
-	ngAfterContentChecked() {
-		const ctrl = this.matFormField._control;
-		const abstractControl = ctrl?.ngControl?.control;
-		const validators = (abstractControl as AbstractControl & { _rawValidators: MarkedValidatorFn[] })?._rawValidators;
-		if (!validators) return;
-
-		if (ctrl instanceof MatInput ||
-			ctrl instanceof MatSelect ||
-			ctrl instanceof SingleAutoCompleteComponent ||
-			ctrl instanceof MultipleAutoCompleteComponent
-		) {
-			ctrl.required = validators.some(validator => this.requiredValidatornames.includes(validator.type));
-		}
-	}
-}