Disable save for invalid TOSCA function

Disable save button for invalid TOSCA functions in the TOSCA function
modal.

Change-Id: I322f59b20faec17ba0edaa412273ee41c0c2675c
Issue-ID: SDC-4047
Signed-off-by: andre.schmid <andre.schmid@est.tech>

2 files changed, 16 insertions, 7 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 7feea50d89..ab67b0c827 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -538,6 +538,7 @@ export class PropertiesAssignmentComponent {
     private openToscaGetFunctionModal() {
         const modalTitle = this.translateService.translate('TOSCA_FUNCTION_MODAL_TITLE');
         const modalButtons = [];
+        let disableSaveButtonFlag = true;
         modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
             () => {
                 const toscaGetFunction: ToscaGetFunction = modal.instance.dynamicContent.instance.toscaGetFunction;
@@ -547,7 +548,8 @@ export class PropertiesAssignmentComponent {
                     this.clearCheckedInstancePropertyValue();
                 }
                 modal.instance.close();
-            }
+            },
+            (): boolean => { return disableSaveButtonFlag }
         ));
         const checkedInstanceProperty = this.buildCheckedInstanceProperty();
         modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
@@ -565,6 +567,9 @@ export class PropertiesAssignmentComponent {
             'property': checkedInstanceProperty,
             'componentInstanceMap': this.componentInstanceMap
         });
+        modal.instance.dynamicContent.instance.onValidityChange.subscribe(isValid => {
+            disableSaveButtonFlag = !isValid;
+        });
         modal.instance.open();
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index 81e5b473a1..8c983b61b8 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -48,6 +48,10 @@ export class ToscaFunctionComponent implements OnInit {
 
     toscaGetFunctionValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
         const toscaGetFunction: ToscaGetFunction = control.value;
+        const hasAnyValue = Object.keys(toscaGetFunction).find(key => toscaGetFunction[key]);
+        if (!hasAnyValue) {
+            return null;
+        }
         const errors: ValidationErrors = {};
         if (!toscaGetFunction.sourceName) {
             errors.sourceName = { required: true };
@@ -105,15 +109,15 @@ export class ToscaFunctionComponent implements OnInit {
         this.loadToscaFunctions();
         this.loadPropertySourceDropdown();
         this.initToscaGetFunction();
+    }
+
+    private initToscaGetFunction(): void {
         this.toscaGetFunctionForm.valueChanges.subscribe(toscaGetFunction => {
             this.onValidityChange.emit(this.toscaGetFunctionForm.valid);
             if (this.toscaGetFunctionForm.valid) {
                 this.onValidFunction.emit(toscaGetFunction);
             }
-        })
-    }
-
-    private initToscaGetFunction(): void {
+        });
         if (!this.property.isToscaGetFunction()) {
             return;
         }
@@ -177,8 +181,8 @@ export class ToscaFunctionComponent implements OnInit {
     }
 
     private resetForm(): void {
-        this.toscaGetFunction = new ToscaGetFunction(undefined);
-        this.toscaGetFunctionForm.setValue(new ToscaGetFunction(undefined));
+        this.toscaGetFunction = new ToscaGetFunction();
+        this.toscaGetFunctionForm.setValue(new ToscaGetFunction());
         this.propertySource = undefined;
         this.selectedProperty = undefined;
     }