dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Multiple input widget, prevent saving invalid form

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2022-01-13 17:32:45 +02:00
parent 0c85479eaf
commit ff6168ebae
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
View File

@ -18,7 +18,7 @@
<form #formContainer class="tb-multiple-input" <form #formContainer class="tb-multiple-input"
[formGroup]="multipleInputFormGroup" [formGroup]="multipleInputFormGroup"
tb-toast toastTarget="{{ toastTargetId }}" tb-toast toastTarget="{{ toastTargetId }}"
(ngSubmit)="save()" novalidate autocomplete="off"> (ngSubmit)="saveForm()" novalidate autocomplete="off">
<div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid"> <div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid">
<fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}"> <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
<legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }} <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
@ -127,7 +127,7 @@
<mat-select formControlName="{{key.formId}}" <mat-select formControlName="{{key.formId}}"
[required]="key.settings.required" [required]="key.settings.required"
(focus)="key.isFocused = true;" (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" <mat-option *ngFor="let option of key.settings.selectOptions"
[value]="option.value" [value]="option.value"
[disabled]="key.settings.isEditable === 'readonly'"> [disabled]="key.settings.isEditable === 'readonly'">
@ -143,7 +143,7 @@
</div> </div>
</fieldset> </fieldset>
<div class="mat-padding" fxLayout="row" fxLayoutAlign="end center" <div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
[fxShow]="entityDetected && settings.showActionButtons"> *ngIf="entityDetected && settings.showActionButtons">
<button mat-button color="primary" type="button" <button mat-button color="primary" type="button"
(click)="discardAll()" style="max-height: 50px; margin-right:20px;" (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
[disabled]="!multipleInputFormGroup.dirty"> [disabled]="!multipleInputFormGroup.dirty">

26
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
View File

@ -423,7 +423,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
break; break;
case 'select': case 'select':
value = keyValue.toString(); value = keyValue !== null ? keyValue.toString() : null;
break; break;
default: default:
value = keyValue; value = keyValue;
@ -565,21 +565,23 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
} }
public inputChanged(source: MultipleInputWidgetSource, key: MultipleInputWidgetDataKey) { 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; 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 save(dataToSave?: MultipleInputWidgetSource) { public saveForm() {
if (this.settings.showActionButtons) {
this.save();
}
}
private save(dataToSave?: MultipleInputWidgetSource) {
if (document?.activeElement && !this.isSavingInProgress) { if (document?.activeElement && !this.isSavingInProgress) {
this.isSavingInProgress = true; this.isSavingInProgress = true;
(document.activeElement as HTMLElement).blur(); (document.activeElement as HTMLElement).blur();