Merge pull request #12738 from deaflynx/fix/mobile-center-validation-improvement

Mobile center added page name validators

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.html

@@ -43,6 +43,22 @@
       <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic" floatLabel="always">
         <mat-label translate>mobile.page-name</mat-label>
         <input matInput formControlName="label" placeholder="{{ defaultItemName }}">
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  matTooltip="{{ 'mobile.page-name-cannot-contain-only-spaces' | translate }}"
+                  *ngIf="mobilePageFormGroup.get('label').hasError('pattern') && mobilePageFormGroup.get('label').touched"
+                  class="tb-error">
+          warning
+        </mat-icon>
+        <mat-icon matSuffix
+                  matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  matTooltip="{{ 'mobile.page-name-max-length' | translate }}"
+                  *ngIf="mobilePageFormGroup.get('label').hasError('maxlength') && mobilePageFormGroup.get('label').touched"
+                  class="tb-error">
+          warning
+        </mat-icon>
       </mat-form-field>
     </div>
   </div>

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.ts

@@ -17,7 +17,7 @@
 import { Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { DefaultMobilePage, defaultMobilePageMap, hideDefaultMenuItems } from '@shared/models/mobile-app.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
@@ -43,7 +43,7 @@ export class DefaultMobilePagePanelComponent implements OnInit {
   mobilePageFormGroup = this.fb.group({
     visible: [true],
     icon: [''],
-    label: [''],
+    label: ['', [Validators.pattern(/\S/), Validators.maxLength(255)]],
   });
 
   isCleanupEnabled = false;

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.html

@@ -50,6 +50,14 @@
                     class="tb-error">
             warning
           </mat-icon>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    matTooltip="{{ 'mobile.page-name-max-length' | translate }}"
+                    *ngIf="mobilePageRowForm.get('label').hasError('maxlength') && mobilePageRowForm.get('label').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
         </mat-form-field>
         <mat-form-field *ngIf="isCustomMenuItem"
                         class="tb-mobile-page-item-info flex" appearance="outline" subscriptSizing="dynamic">

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/mobile-page-item-row.component.ts

@@ -99,7 +99,7 @@ export class MobilePageItemRowComponent implements ControlValueAccessor, OnInit,
   mobilePageRowForm = this.fb.group({
     visible: [true, []],
     icon: ['', []],
-    label: ['', [Validators.pattern(/\S/)]],
+    label: ['', [Validators.pattern(/\S/), Validators.maxLength(255)]],
     type: [MobilePageType.DEFAULT]
   });