diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
index 32b99b46c..6c88bba4a 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
@@ -36,4 +36,6 @@ export interface MultipleAutoCompleteConfiguration {
autoSelectFirstOptionOnBlur?: boolean;
+ appendClassToItem?: {class: string, applyFunc: (item:any) => boolean}[];
+
}
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 3c89cd3ff..63ed19aec 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -1,7 +1,7 @@
-
+
{{_displayFn(selectedItem)}}
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
index d209c4593..4cdb40be1 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
@@ -365,6 +365,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
get popupItemActionIcon(): string {
return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
}
+ get appendClassToItem(): {class: string, applyFunc: (item: any) => boolean}[]{
+ return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
+ }
//Chip Functions
_addItem(event: MatChipInputEvent): void {
@@ -400,4 +403,19 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
if (event != null) { event.stopPropagation(); }
this.optionActionClicked.emit(item);
}
+
+
+ private readonly empyObj = {};
+ computeClass(value: any){
+ if(!(this.appendClassToItem && this.appendClassToItem.length)){
+ return this.empyObj;
+ }
+
+ const classes = this.appendClassToItem.filter(e=> e.applyFunc(value));
+ return classes.reduce((r, current) => {
+ r[current.class] = true;
+ return r;
+ } , {});
+
+ }
}
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss
index 4919dc0e8..650d75379 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss
@@ -121,3 +121,15 @@
background: #129d99;
color: #ffffff;
}
+
+@keyframes blink{
+ 0% {border: 1px solid rgba(255, 0, 0, 0.2);}
+ 50% {border: 1px solid rgba(255, 0, 0, 0.5);}
+ 100% {border: 1px solid rgba(255, 0, 0, 0.2);}
+}
+
+:host ::ng-deep .invalid-email{
+ border: 1px solid red;
+ // animation: blink 1.4s infinite;
+ // animation-fill-mode: both;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts
index d15a9dd9c..0e9299f0e 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts
@@ -69,7 +69,13 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
const result = typeof(item) === 'string' ? item : item.email;
return result;
},
- autoSelectFirstOptionOnBlur: true
+ autoSelectFirstOptionOnBlur: true,
+ appendClassToItem: [{class: 'invalid-email', applyFunc: (item)=> {
+ const val = typeof(item) === 'string'? item : item.email;
+ const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+ return !regexp.test(val);
+ }
+ }]
};
add(event: MatChipInputEvent): void {