Merge pull request #5879 from vvlladd28/bug/multiple-input-widget/save-invalid-form

[3.3.3] UI: Multiple input widget, prevent saving invalid form

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">

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;
+      const dataToSave: MultipleInputWidgetSource = {
-      if (!key.settings.required ||
+        datasource: source.datasource,
-        (key.settings.required && isDefinedAndNotNull(currentValue) && isNotEmptyStr(currentValue.toString()))) {
+        keys: [key]
-        const dataToSave: MultipleInputWidgetSource = {
+      };
-          datasource: source.datasource,
+      this.save(dataToSave);
-          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();