From ff6168ebae568d1bf5a77b2f5aa013c216138841 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 13 Jan 2022 17:32:45 +0200
Subject: [PATCH] UI: Multiple input widget, prevent saving invalid form

---
 .../lib/multiple-input-widget.component.html  |  6 ++---
 .../lib/multiple-input-widget.component.ts    | 26 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 6907a8afbf..c5453873e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -18,7 +18,7 @@
 <form #formContainer class="tb-multiple-input"
       [formGroup]="multipleInputFormGroup"
       tb-toast toastTarget="{{ toastTargetId }}"
-      (ngSubmit)="save()" novalidate autocomplete="off">
+      (ngSubmit)="saveForm()" novalidate autocomplete="off">
   <div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid">
     <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
       <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
@@ -127,7 +127,7 @@
               <mat-select formControlName="{{key.formId}}"
                           [required]="key.settings.required"
                           (focus)="key.isFocused = true;"
-                          (blur)="key.isFocused = false; inputChanged(source, key)">
+                          (selectionChange)="key.isFocused = false; inputChanged(source, key)">
                 <mat-option *ngFor="let option of key.settings.selectOptions"
                             [value]="option.value"
                             [disabled]="key.settings.isEditable === 'readonly'">
@@ -143,7 +143,7 @@
       </div>
     </fieldset>
     <div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
-         [fxShow]="entityDetected && settings.showActionButtons">
+         *ngIf="entityDetected && settings.showActionButtons">
       <button mat-button color="primary" type="button"
               (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
               [disabled]="!multipleInputFormGroup.dirty">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index cac977dd4c..42414728f1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -423,7 +423,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
               }
               break;
             case 'select':
-              value = keyValue.toString();
+              value = keyValue !== null ? keyValue.toString() : null;
               break;
             default:
               value = keyValue;
@@ -565,21 +565,23 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
   }
 
   public inputChanged(source: MultipleInputWidgetSource, key: MultipleInputWidgetDataKey) {
-    if (!this.settings.showActionButtons && !this.isSavingInProgress) {
+    if (!this.settings.showActionButtons && !this.isSavingInProgress && this.multipleInputFormGroup.get(key.formId).valid) {
       this.isSavingInProgress = true;
-      const currentValue = this.multipleInputFormGroup.get(key.formId).value;
-      if (!key.settings.required ||
-        (key.settings.required && isDefinedAndNotNull(currentValue) && isNotEmptyStr(currentValue.toString()))) {
-        const dataToSave: MultipleInputWidgetSource = {
-          datasource: source.datasource,
-          keys: [key]
-        };
-        this.save(dataToSave);
-      }
+      const dataToSave: MultipleInputWidgetSource = {
+        datasource: source.datasource,
+        keys: [key]
+      };
+      this.save(dataToSave);
+    }
+  }
+
+  public saveForm() {
+    if (this.settings.showActionButtons) {
+      this.save();
     }
   }
 
-  public save(dataToSave?: MultipleInputWidgetSource) {
+  private save(dataToSave?: MultipleInputWidgetSource) {
     if (document?.activeElement && !this.isSavingInProgress) {
       this.isSavingInProgress = true;
       (document.activeElement as HTMLElement).blur();