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

UI: Fixed validation alias name for js module

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-12-24 11:47:05 +02:00
parent d06bac8bf2
commit 8a53140b3f
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-ngx/src/app/shared/components/js-func-module-row.component.html
View File

@ -18,6 +18,14 @@
<div [formGroup]="moduleRowFormGroup" class="tb-form-table-row tb-js-func-module-row">
<mat-form-field class="tb-inline-field tb-alias-field" appearance="outline" subscriptSizing="dynamic">
<input required matInput formControlName="alias" placeholder="{{ 'widget-config.set' | translate }}">
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'js-func.invalid-module-alias-name' | translate"
*ngIf="moduleRowFormGroup.get('alias').invalid && moduleRowFormGroup.get('alias').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
<tb-resource-autocomplete class="tb-module-link-field"
#resourceAutocomplete

12
ui-ngx/src/app/shared/components/js-func-module-row.component.ts
View File

@ -39,7 +39,7 @@ import {
} from '@angular/forms';
import { JsFuncModulesComponent } from '@shared/components/js-func-modules.component';
import { ResourceSubType } from '@shared/models/resource.models';
import { Observable, of } from 'rxjs';
import { Observable } from 'rxjs';
import { ResourceAutocompleteComponent } from '@shared/components/resource/resource-autocomplete.component';
import { HttpClient } from '@angular/common/http';
import { loadModuleMarkdownDescription, loadModuleMarkdownSourceCode } from '@shared/models/js-function.models';
@ -103,7 +103,7 @@ export class JsFuncModuleRowComponent implements ControlValueAccessor, OnInit, V
ngOnInit() {
this.moduleRowFormGroup = this.fb.group({
alias: [null, [this.moduleAliasValidator()]],
alias: [null, [this.moduleAliasValidator(), Validators.pattern(/^[$_\p{ID_Start}][$\p{ID_Continue}]*$/u)]],
moduleLink: [null, [Validators.required]]
});
this.moduleRowFormGroup.valueChanges.pipe(
@ -133,7 +133,7 @@ export class JsFuncModuleRowComponent implements ControlValueAccessor, OnInit, V
public validate(_c: UntypedFormControl) {
const aliasControl = this.moduleRowFormGroup.get('alias');
if (aliasControl.hasError('moduleAliasNotUnique')) {
if (aliasControl.hasError('moduleAliasNotUnique') || aliasControl.hasError('pattern')) {
aliasControl.updateValueAndValidity({onlySelf: false, emitEvent: false});
}
if (aliasControl.hasError('moduleAliasNotUnique')) {
@ -142,6 +142,12 @@ export class JsFuncModuleRowComponent implements ControlValueAccessor, OnInit, V
moduleAliasNotUnique: true
};
}
if (aliasControl.hasError('pattern')) {
this.moduleRowFormGroup.get('alias').markAsTouched();
return {
invalidVariableName: true
};
}
const module: JsFuncModuleRow = {...this.modelValue, ...this.moduleRowFormGroup.value};
if (!moduleValid(module)) {
return {

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3324,6 +3324,7 @@
"no-modules": "No modules configured",
"add-module": "Add module",
"module-alias": "Alias",
"invalid-module-alias-name": "Invalid alias name",
"module-resource": "JS module resource",
"not-unique-module-aliases-error": "Modules aliases must be unique!",
"show-module-info": "Show module info",