MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

fixed mat input asterist issue for description form.

This commit is contained in:
Diamantis Tziotzios 2024-06-17 13:02:57 +03:00
parent 5ffc07979f
commit d2e3bc4aba
12 changed files with 165 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/core/services/culture/culture-service.ts
View File

@ -63,7 +63,7 @@ export class CultureService {
// This is a very hacky way to map cultures with angular cultures, since there is no mapping. We first try to // This is a very hacky way to map cultures with angular cultures, since there is no mapping. We first try to
// use the culture with the specialization (ex en-US), and if not exists we import the base culture (first part). // use the culture with the specialization (ex en-US), and if not exists we import the base culture (first part).
let locale = newCulture.name; let locale = newCulture.name;
this.loadLocale(locale); this.loadLocale(locale);
} }
getCultureChangeObservable(): Observable<CultureInfo> { getCultureChangeObservable(): Observable<CultureInfo> {

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

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

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

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

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

@ -323,7 +323,7 @@ export class DescriptionPropertyDefinitionFieldSetEditorModel implements Descrip
const validators = []; const validators = [];
validators.push(BackendErrorValidator(validationErrorModel, `${rootPath}items`)); 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) { if (params.fieldSetDefinition?.multiplicity?.min >= 0 && params.fieldSetDefinition?.multiplicity?.max >= 0) {
validators.push(Validators.minLength(params.fieldSetDefinition.multiplicity.min)); validators.push(Validators.minLength(params.fieldSetDefinition.multiplicity.min));
validators.push(Validators.maxLength(params.fieldSetDefinition.multiplicity.max)); validators.push(Validators.maxLength(params.fieldSetDefinition.multiplicity.max));
@ -496,7 +496,7 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
this.dateValue = item.dateValue; this.dateValue = item.dateValue;
this.booleanValue = item.booleanValue; this.booleanValue = item.booleanValue;
this.tags = item.tags?.map(x => x.label); this.tags = item.tags?.map(x => x.label);
const references = descriptionReferences?.filter(x => x.data?.fieldId == descriptionTemplateField?.id && x.data.ordinal == ordinal && x.isActive == IsActive.Active).map(x => { const references = descriptionReferences?.filter(x => x.data?.fieldId == descriptionTemplateField?.id && x.data.ordinal == ordinal && x.isActive == IsActive.Active).map(x => {
return { return {
id: x.reference.id, id: x.reference.id,
label: x.reference.label, label: x.reference.label,
@ -557,7 +557,10 @@ export class DescriptionFieldEditorModel implements DescriptionFieldPersist {
case DescriptionTemplateFieldType.DATASET_IDENTIFIER: case DescriptionTemplateFieldType.DATASET_IDENTIFIER:
case DescriptionTemplateFieldType.VALIDATION: case DescriptionTemplateFieldType.VALIDATION:
formGroup.addControl(fieldValueControlName, this.externalIdentifier.buildForm({ 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: case DescriptionTemplateFieldType.DATE_PICKER:
formGroup.addControl(fieldValueControlName, new FormControl({ value: this.dateValue, disabled: disabled }, context.getValidation(fieldValueControlName).validators)); 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({ DescriptionExternalIdentifierEditorModel.reapplyValidators({
formGroup: formGroup?.get('externalIdentifier') as UntypedFormGroup, formGroup: formGroup?.get('externalIdentifier') as UntypedFormGroup,
rootPath: `${rootPath}externalIdentifier.`, 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?: { buildForm(params?: {
context?: ValidationContext, context?: ValidationContext,
disabled?: boolean, disabled?: boolean,
rootPath?: string rootPath?: string,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): UntypedFormGroup { }): UntypedFormGroup {
let { context = null, disabled = false, rootPath } = params ?? {} let { context = null, disabled = false, rootPath } = params ?? {}
if (context == null) { if (context == null) {
context = DescriptionExternalIdentifierEditorModel.createValidationContext({ context = DescriptionExternalIdentifierEditorModel.createValidationContext({
validationErrorModel: this.validationErrorModel, 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: { static createValidationContext(params: {
rootPath?: string, rootPath?: string,
validationErrorModel: ValidationErrorModel validationErrorModel: ValidationErrorModel,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): ValidationContext { }): ValidationContext {
const { rootPath = '', validationErrorModel } = params; const { rootPath = '', validationErrorModel } = params;
const baseContext: ValidationContext = new ValidationContext(); const baseContext: ValidationContext = new ValidationContext();
const baseValidationArray: Validation[] = new Array<Validation>(); 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; baseContext.validation = baseValidationArray;
return baseContext; return baseContext;
} }
@ -702,13 +730,19 @@ export class DescriptionExternalIdentifierEditorModel implements DescriptionExte
static reapplyValidators(params: { static reapplyValidators(params: {
formGroup: UntypedFormGroup, formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel, validationErrorModel: ValidationErrorModel,
rootPath: string rootPath: string,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): void { }): void {
const { formGroup, rootPath, validationErrorModel } = params; const { formGroup, rootPath, validationErrorModel } = params;
const context = DescriptionExternalIdentifierEditorModel.createValidationContext({ const context = DescriptionExternalIdentifierEditorModel.createValidationContext({
rootPath, rootPath,
validationErrorModel validationErrorModel,
fieldDefinition: params.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
}); });
['identifier', 'type'].forEach(keyField => { ['identifier', 'type'].forEach(keyField => {
@ -778,13 +812,19 @@ export class DescriptionReferenceEditorModel implements DescriptionReferencePers
static reapplyValidators(params: { static reapplyValidators(params: {
formGroup: UntypedFormGroup, formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel, validationErrorModel: ValidationErrorModel,
rootPath: string rootPath: string,
fieldDefinition: DescriptionTemplateField,
visibilityRulesService: VisibilityRulesService,
visibilityRulesKey: string
}): void { }): void {
const { formGroup, rootPath, validationErrorModel } = params; const { formGroup, rootPath, validationErrorModel } = params;
const context = DescriptionExternalIdentifierEditorModel.createValidationContext({ const context = DescriptionExternalIdentifierEditorModel.createValidationContext({
rootPath, rootPath,
validationErrorModel validationErrorModel,
fieldDefinition: params.fieldDefinition,
visibilityRulesService: params.visibilityRulesService,
visibilityRulesKey: params.visibilityRulesKey
}); });
['id', 'reference'].forEach(keyField => { ['id', 'reference'].forEach(keyField => {

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

@ -11,7 +11,7 @@
<div class="col-12"> <div class="col-12">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{ field.data.label }}</mat-label> <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('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('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> <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"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES" class="col-12">
<ng-container *ngIf="field.data.multipleSelect"> <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>
<ng-container *ngIf="!(field.data.multipleSelect)"> <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> </ng-container>
</div> </div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <ng-container *ngIf="field.data.multipleSelect">
<ng-container *ngIf="field.data.multipleSelect"> <mat-form-field class="col-md-12">
<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textListValue')" 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('textListValue')" [multiple]="field.data.multipleSelect">
<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</mat-option> <mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</mat-option>
</mat-select> </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('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-error *ngIf="propertiesFormGroup?.get(field.id).get('textListValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</ng-container> </mat-form-field>
<ng-container *ngIf="!(field.data.multipleSelect)"> </ng-container>
<mat-select [formControl]="propertiesFormGroup?.get(field.id).get('textValue')" placeholder="{{ (field.data.label | translate) + (isRequired? ' *': '') }}" [multiple]="field.data.multipleSelect"> <ng-container *ngIf="!(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 *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}
</mat-option> </mat-option>
</mat-select> </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('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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</ng-container> </mat-form-field>
</mat-form-field> </ng-container>
</div> </div>
</div> </div>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS" class="col-12"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS" class="col-12">
@ -53,7 +57,7 @@
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label> <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> </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('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-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)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label> <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> </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('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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -77,7 +81,7 @@
<ng-container *ngIf="field.data.multipleSelect"> <ng-container *ngIf="field.data.multipleSelect">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label> <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> </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('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-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)"> <ng-container *ngIf="!(field.data.multipleSelect)">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label> <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> </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('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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -105,7 +109,7 @@
<div class="col-12"> <div class="col-12">
<mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="w-100"> <mat-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="w-100">
<mat-label>{{ field.data.label }}</mat-label> <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('')"> <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> <mat-icon>close</mat-icon>
</button> </button>
@ -138,7 +142,7 @@
<div class="col-12 d-flex justify-content-center attach-btn"> <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"> <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-icon class="mr-2">upload</mat-icon>
<mat-label>{{ (field.data.label | translate)}}</mat-label> <mat-label>{{field.data.label}}</mat-label>
</button> </button>
<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn"> <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-form-field *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12">
<mat-label>{{ field.data.label }}</mat-label> <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-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker> <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> <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> </mat-form-field>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12"> <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>
<div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12"> <div *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12">
<div class="row" *ngIf="datasetIdInitialized"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label> <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('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-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{ field.data.label }}</mat-label> <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"> <mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>
@ -206,13 +210,13 @@
<div class="row align-items-baseline"> <div class="row align-items-baseline">
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{ field.data.label }}</mat-label> <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('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-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{ field.data.label }}</mat-label> <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"> <mat-option *ngFor="let type of validationTypes" [value]="type.value">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>

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

@ -60,8 +60,6 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
readonly separatorKeysCodes: number[] = [ENTER, COMMA]; readonly separatorKeysCodes: number[] = [ENTER, COMMA];
datasetIdInitialized: boolean = false;
validationIcon; validationIcon;
readonly datasetIdTypes: any[] = [ readonly datasetIdTypes: any[] = [
@ -105,10 +103,10 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
ngOnInit() { 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 id = Guid.parse((this.propertiesFormGroup?.get(this.field.id).get('textValue').value as string));
const fields = [ const fields = [
nameof<StorageFile>(x => x.id), nameof<StorageFile>(x => x.id),
nameof<StorageFile>(x => x.name), nameof<StorageFile>(x => x.name),
nameof<StorageFile>(x => x.extension), nameof<StorageFile>(x => x.extension),
@ -124,38 +122,9 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
this.descriptionFormService.getDetectChangesObservable().pipe(takeUntil(this._destroyed)).subscribe( x => this.changeDetectorRef.markForCheck()); this.descriptionFormService.getDetectChangesObservable().pipe(takeUntil(this._destroyed)).subscribe( x => this.changeDetectorRef.markForCheck());
} }
private applyFieldType(){ private applyFieldType() {
this.isRequired = this.field.validations?.includes(DescriptionTemplateFieldValidationType.Required); 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 this.propertiesFormGroup.get(this.field.id).valueChanges
.pipe( .pipe(
takeUntil(this._destroyed), takeUntil(this._destroyed),
@ -238,18 +207,18 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
public upload() { public upload() {
this.storageFileService.uploadTempFiles(this.filesToUpload[0]) this.storageFileService.uploadTempFiles(this.filesToUpload[0])
.pipe(takeUntil(this._destroyed)).subscribe((response) => { .pipe(takeUntil(this._destroyed)).subscribe((response) => {
this.propertiesFormGroup?.get(this.field.id).get('textValue').patchValue(response[0].id.toString()); this.propertiesFormGroup?.get(this.field.id).get('textValue').patchValue(response[0].id.toString());
this.createFileNameDisplay(response[0].name, response[0].extension); this.createFileNameDisplay(response[0].name, response[0].extension);
this.cdr.detectChanges(); this.cdr.detectChanges();
}, error => { }, error => {
this.onCallbackUploadFail(error.error); this.onCallbackUploadFail(error.error);
}) })
} }
private createFileNameDisplay(name: string, extension: string){ private createFileNameDisplay(name: string, extension: string) {
if (extension.startsWith('.')) this.fileNameDisplay = name + extension; if (extension.startsWith('.')) this.fileNameDisplay = name + extension;
else this.fileNameDisplay = name + '.' + extension; else this.fileNameDisplay = name + '.' + extension;
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
@ -326,7 +295,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
const filename = this.fileUtils.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition')); const filename = this.fileUtils.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
FileSaver.saveAs(blob, filename); FileSaver.saveAs(blob, filename);
}, },
error => this.httpErrorHandlingService.handleBackedRequestError(error)); error => this.httpErrorHandlingService.handleBackedRequestError(error));
} }
} }

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

@ -1,11 +1,11 @@
import {ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { AbstractControl, FormControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service'; import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { MarkedValidatorFn } from '@common/forms/validation/custom-validator';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { DescriptionEditorModel } from '../description-editor.model';
import { nameof } from 'ts-simple-nameof'; import { nameof } from 'ts-simple-nameof';
import { BackendErrorValidator, MarkedValidatorFn } from '@common/forms/validation/custom-validator'; import { DescriptionEditorModel } from '../description-editor.model';
@Component({ @Component({
selector: 'app-form-progress-indication', selector: 'app-form-progress-indication',
@ -20,7 +20,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
progressSoFar: number; progressSoFar: number;
total: number; total: number;
percent: 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(); } constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
@ -30,18 +30,18 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
if(changes.formGroup) { if (changes.formGroup) {
this.init(); this.init();
} }
} }
init() { init() {
setTimeout(() => {this.calculateValueForProgressbar();}); setTimeout(() => { this.calculateValueForProgressbar(); });
this.formGroup this.formGroup
.valueChanges .valueChanges
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(control => { .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 { countRequiredFields(formControl: AbstractControl, checkVisibility = false, countCompletedFields = false): number {
let valueCurrent = 0; let valueCurrent = 0;
if (formControl instanceof UntypedFormGroup) { 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 => { Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item); const control = formControl.get(item);
valueCurrent = valueCurrent + this.countRequiredFields(control, checkVisibility, countCompletedFields); 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 { countRequiredFieldsByFieldset(ordinal: number, fieldsFormGroup: UntypedFormGroup, filterValid: boolean = false): number {
let fieldsCount: number = 0; let fieldsCount: number = 0;
const fieldSetNames = Object.keys(fieldsFormGroup.controls); const fieldSetNames = Object.keys(fieldsFormGroup.controls);
for(let item of fieldSetNames) { for (let item of fieldSetNames) {
if (!this.checkVisibility || this.visibilityRulesService.isVisible(item, ordinal)) { if (!this.checkVisibility || this.visibilityRulesService.isVisible(item, ordinal)) {
const fieldControl = fieldsFormGroup.get(item); const fieldControl = fieldsFormGroup.get(item);
const fieldNames = Object.keys((fieldControl as UntypedFormGroup).controls); 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 (filterValid) controlFilter = controlFilter && typedControl.valid;
if (controlFilter) { if (controlFilter) {
fieldsCount ++; fieldsCount++;
break; break;
} }
} }
@ -199,7 +199,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
countFormControlsValidForProgress(formControl: AbstractControl): number { countFormControlsValidForProgress(formControl: AbstractControl): number {
let valueCurrent = 0; let valueCurrent = 0;
if (formControl instanceof UntypedFormControl) { if (formControl instanceof UntypedFormControl) {
if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl.valid) { if (this.controlRequired(formControl) && this.controlEnabled(formControl) && formControl.valid) {
valueCurrent++; valueCurrent++;
} }
} else if (formControl instanceof UntypedFormGroup) { } else if (formControl instanceof UntypedFormGroup) {
@ -218,7 +218,7 @@ export class FormProgressIndicationComponent extends BaseComponent implements On
controlRequired(formControl: AbstractControl) { controlRequired(formControl: AbstractControl) {
if (formControl.validator) { if (formControl.validator) {
const validators = (formControl as AbstractControl & { _rawValidators: MarkedValidatorFn[] })._rawValidators; const validators = (formControl as AbstractControl & { _rawValidators: MarkedValidatorFn[] })._rawValidators;
return validators.some(validator => validator.type === 'RequiredWithVisibilityRulesValidator'); return validators.some(validator => validator.type === 'RequiredWithVisibilityRulesValidator');
} }
return false; return false;

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

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

2
dmp-frontend/src/app/utilities/enhancers/utils.ts
View File

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

8
dmp-frontend/src/common/forms/common-forms.module.ts
View File

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

34
dmp-frontend/src/common/forms/reactive-asterisk-directive.ts Normal file
View File

@ -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));
}
}
}

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

@ -13,20 +13,20 @@ export type MarkedValidatorFn = ValidatorFn & { type: string, metadata: unknown
// To address this we followed the approach discussed here https://github.com/angular/angular/issues/54305 // To address this we followed the approach discussed here https://github.com/angular/angular/issues/54305
export class CustomValidators { export class CustomValidators {
static extendValidatorWithMetadata(validatorFn: ValidatorFn, type: string, metadata?: unknown): MarkedValidatorFn { static extendValidatorWithMetadata(validatorFn: ValidatorFn, type: string, metadata?: unknown): MarkedValidatorFn {
const fn = validatorFn as MarkedValidatorFn; const fn = validatorFn as MarkedValidatorFn;
fn.type = type; fn.type = type;
fn.metadata = metadata; fn.metadata = metadata;
return fn; return fn;
} }
static required = (): MarkedValidatorFn => this.extendValidatorWithMetadata(Validators.required, 'required'); static required = (): MarkedValidatorFn => this.extendValidatorWithMetadata(Validators.required, 'required');
static RequiredWithVisibilityRulesValidator(visibilityRulesService: VisibilityRulesService, visibilityRulesKey: string) { static RequiredWithVisibilityRulesValidator(visibilityRulesService: VisibilityRulesService, visibilityRulesKey: string) {
return this.extendValidatorWithMetadata((control: UntypedFormControl): { [key: string]: any } => { return this.extendValidatorWithMetadata((control: UntypedFormControl): { [key: string]: any } => {
if (visibilityRulesService.isVisibleMap[visibilityRulesKey] ?? true) { if (visibilityRulesService.isVisibleMap[visibilityRulesKey] ?? true) {
return Validators.required(control) ; return Validators.required(control);
} }
FormService.removeError(control, 'required'); FormService.removeError(control, 'required');
return null; 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\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$/; const urlRegex = /^(?:http(s)?:\/\/)[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:\/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
return Validators.pattern(urlRegex); return Validators.pattern(urlRegex);
} }