Merge branch 'dmp-refactoring' of https://code-repo.d4science.org/MaDgiK-CITE/argos into dmp-refactoring

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 = false;
+	private _required;
 
 	@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 = false;
+	private _required;
 
 	@Input()
 	get disabled() { return this._disabled; }

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

@@ -323,7 +323,7 @@ export class DescriptionPropertyDefinitionFieldSetEditorModel implements Descrip
 		const validators = [];
 		validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}items`));
 
-		if (params.fieldSetDefinition?.hasMultiplicity){
+		if (params.fieldSetDefinition?.hasMultiplicity) {
 			if (params.fieldSetDefinition?.multiplicity?.min >= 0 && params.fieldSetDefinition?.multiplicity?.max >= 0) {
 				validators.push(Validators.minLength(params.fieldSetDefinition.multiplicity.min));
 				validators.push(Validators.maxLength(params.fieldSetDefinition.multiplicity.max));
@@ -557,7 +557,10 @@ 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));
@@ -643,7 +646,10 @@ 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
 		});
 	}
 }
@@ -669,13 +675,19 @@ 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
 			});
 		}
 
@@ -687,14 +699,30 @@ 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`)] });
-		baseValidationArray.push({ key: 'type', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}type`)] });
+
+		let validators = [];
+		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;
 	}
@@ -702,13 +730,19 @@ 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 => {
@@ -778,13 +812,19 @@ 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')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}">
+				<input matInput [formControl]="propertiesFormGroup?.get(field.id).get('textValue')">
 				<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,31 +21,35 @@
 
 	<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 | 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>
+			<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>
 		</ng-container>
 		<ng-container *ngIf="!(field.data.multipleSelect)">
-			<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>
+			<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>
 		</ng-container>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
 		<div class="row">
-			<mat-form-field class="col-md-12">
 			<ng-container *ngIf="field.data.multipleSelect">
-					<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect">
+				<mat-form-field class="col-md-12">
+					<mat-label>{{ field.data.label }}</mat-label>
+					<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [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-select [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect">
+				<mat-form-field class="col-md-12">
+					<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>
-				</ng-container>
 				</mat-form-field>
+			</ng-container>
 		</div>
 	</div>
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS" class="col-12">
@@ -53,7 +57,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 placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="descriptionService.multipleAutocompleteConfiguration">
+					<app-multiple-auto-complete [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>
@@ -63,7 +67,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 placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="descriptionService.singleAutocompleteConfiguration">
+					<app-single-auto-complete [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>
@@ -77,7 +81,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 placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" [configuration]="dmpService.multipleAutocompleteConfiguration">
+					<app-multiple-auto-complete [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>
@@ -87,7 +91,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 placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" [configuration]="dmpService.singleAutocompleteConfiguration">
+					<app-single-auto-complete [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>
@@ -105,7 +109,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" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}"></textarea>
+			<textarea matInput class="text-area" [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="15"></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>
@@ -138,7 +142,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 | translate)}}</mat-label>
+				<mat-label>{{field.data.label}}</mat-label>
 			</button>
 
 			<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn">
@@ -170,7 +174,7 @@
 
 	<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12">
 		<mat-label>{{ field.data.label }}</mat-label>
-		<input matInput placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" class="table-input" [matDatepicker]="date" [formControl]="propertiesFormGroup?.get(field.id).get('dateValue')">
+		<input matInput 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>
@@ -178,20 +182,20 @@
 	</mat-form-field>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12">
-		<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>
+		<app-tags-field-component [label]="field.data.label" [placeholder]="field.data.label" [form]="propertiesFormGroup?.get(field.id).get('tags')"></app-tags-field-component>
 	</div>
 
 	<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
-		<div class="row" *ngIf="datasetIdInitialized">
+		<div class="row">
 			<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')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">
+				<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')">
 				<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')" [placeholder]="('TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate) + (isRequired? ' *': '')" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type').disabled">
+				<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')">
 					<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
 						{{ type.name }}
 					</mat-option>
@@ -206,13 +210,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')" placeholder="{{(field.data.label) + (isRequired? ' *': '')}}">
+				<input matInput class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier')">
 				<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) + (isRequired? ' *': '')">
+				<mat-select class="col-md-12" [formControl]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type')" [placeholder]="'TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate">
 					<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,8 +60,6 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
-	datasetIdInitialized: boolean = false;
-
 	validationIcon;
 
 	readonly datasetIdTypes: any[] = [
@@ -105,7 +103,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 
 	ngOnInit() {
 
-		if(this.field?.data?.fieldType == DescriptionTemplateFieldType.UPLOAD && this.field && this.field.id && (this.propertiesFormGroup?.get(this.field.id).get('textValue').value != undefined) && !this.fileNameDisplay) {
+		if (this.field?.data?.fieldType == DescriptionTemplateFieldType.UPLOAD && this.field && this.field.id && (this.propertiesFormGroup?.get(this.field.id).get('textValue').value != undefined) && !this.fileNameDisplay) {
 			const id = Guid.parse((this.propertiesFormGroup?.get(this.field.id).get('textValue').value as string));
 
 			const fields = [
@@ -124,38 +122,9 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 		this.descriptionFormService.getDetectChangesObservable().pipe(takeUntil(this._destroyed)).subscribe( x => this.changeDetectorRef.markForCheck());
 	}
 
-	private applyFieldType(){
+	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),
@@ -249,7 +218,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
 
 	}
 
-	private createFileNameDisplay(name: string, extension: string){
+	private createFileNameDisplay(name: string, extension: string) {
 		if (extension.startsWith('.')) this.fileNameDisplay = name + extension;
 		else this.fileNameDisplay = name + '.' + extension;
 		this.changeDetectorRef.markForCheck();

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

@@ -1,11 +1,11 @@
-import {ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import { AbstractControl, FormControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } 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 { DescriptionEditorModel } from '../description-editor.model';
 import { nameof } from 'ts-simple-nameof';
-import { BackendErrorValidator, MarkedValidatorFn } from '@common/forms/validation/custom-validator';
+import { DescriptionEditorModel } from '../description-editor.model';
 
 @Component({
 	selector: 'app-form-progress-indication',
@@ -20,7 +20,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
 	progressSoFar: number;
 	total: number;
 	percent: number;
-	fieldTypes: string[] = ['dateValue', 'booleanValue', 'externalIdentifier.identifier', 'externalIdentifier.type', 'reference', 'references' , 'tags', 'textListValue', 'textValue'];
+	fieldTypes: string[] = ['dateValue', 'booleanValue', 'externalIdentifier.identifier', 'externalIdentifier.type', 'reference', 'references', 'tags', 'textListValue', 'textValue'];
 
 	constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
 
@@ -30,18 +30,18 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
-		if(changes.formGroup) {
+		if (changes.formGroup) {
 			this.init();
 		}
 	}
 
 	init() {
-		setTimeout(() => {this.calculateValueForProgressbar();});
+		setTimeout(() => { this.calculateValueForProgressbar(); });
 		this.formGroup
 			.valueChanges
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(control => {
-				setTimeout(() => {this.calculateValueForProgressbar();});
+				setTimeout(() => { this.calculateValueForProgressbar(); });
 			});
 	}
 
@@ -65,7 +65,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
 	countRequiredFields(formControl: AbstractControl, checkVisibility = false, countCompletedFields = false): number {
 		let valueCurrent = 0;
 		if (formControl instanceof UntypedFormGroup) {
-			if(!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
+			if (!checkVisibility || (!formControl.get('id')?.value || (this.visibilityRulesService.isVisibleMap[formControl.get('id').value] ?? true))) {
 				Object.keys(formControl.controls).forEach(item => {
 					const control = formControl.get(item);
 					valueCurrent = valueCurrent + this.countRequiredFields(control, checkVisibility, countCompletedFields);
@@ -82,7 +82,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
 	countRequiredFieldsByFieldset(ordinal: number, fieldsFormGroup: UntypedFormGroup, filterValid: boolean = false): number {
 		let fieldsCount: number = 0;
 		const fieldSetNames = Object.keys(fieldsFormGroup.controls);
-		for(let item of fieldSetNames) {
+		for (let item of fieldSetNames) {
 			if (!this.checkVisibility || this.visibilityRulesService.isVisible(item, ordinal)) {
 				const fieldControl = fieldsFormGroup.get(item);
 				const fieldNames = Object.keys((fieldControl as UntypedFormGroup).controls);
@@ -92,7 +92,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
 					if (filterValid) controlFilter = controlFilter && typedControl.valid;
 
 					if (controlFilter) {
-						fieldsCount ++;
+						fieldsCount++;
 						break;
 					}
 				}

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" [required]="required">
+	<app-multiple-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="multipleAutoCompleteSearchConfiguration">
 	</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" [required]="required">
+	<app-single-auto-complete placeholder="{{ placeholder?.length > 0 ? placeholder : referenceType?.name}}" [formControl]="form" [configuration]="singleAutoCompleteSearchConfiguration">
 	</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,19 +2,25 @@ 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

@@ -0,0 +1,34 @@
+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));
+		}
+	}
+}

dmp-frontend/src/common/forms/validation/custom-validator.ts

@@ -26,7 +26,7 @@ export class CustomValidators {
 		return this.extendValidatorWithMetadata((control: UntypedFormControl): { [key: string]: any } => {
 
 			if (visibilityRulesService.isVisibleMap[visibilityRulesKey] ?? true) {
-				return Validators.required(control) ;
+				return Validators.required(control);
 			}
 			FormService.removeError(control, 'required');
 			return null;
@@ -71,7 +71,7 @@ export function RequiredWithVisibilityRulesValidator(visibilityRulesService: Vis
 	};
 }
 
-export function UrlValidator(): ValidatorFn{
+export function UrlValidator(): ValidatorFn {
 	const urlRegex = /^(?:http(s)?:\/\/)[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
 	return Validators.pattern(urlRegex);
 }