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

14
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;
case 'select':
value = keyValue.toString();
value = keyValue !== null ? keyValue.toString() : null;
break;
default:
value = keyValue;
@ -565,11 +565,8 @@ 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]
@ -577,9 +574,14 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
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();