diff --git a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html
index e8ce4ac98..11f87ff33 100644
--- a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html
+++ b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html
@@ -19,21 +19,41 @@
[class.device-form-create]="!data.device"
[class.device-form-edit]="data.device">
{{ data.title }}
-
+ Device ManufacturerPlease enter device manufacturer name
+
+ Please, check. The manufacturer name must be a maximum of 64
+ characters. Only letters, numbers, and accented letters are
+ permitted.
+ Device Manufacturer is required
-
+ Device ModelPlease enter device name
+
+ Please, check. The device model name must be a maximum of 64
+ characters. Only letters, numbers, and accented letters are
+ permitted.
+ Device Model is required
diff --git a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss
index 96903ccc5..831f9907a 100644
--- a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss
+++ b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss
@@ -34,6 +34,13 @@ $device-form-min-width: 285px;
overflow: auto;
}
+.manufacturer-field,
+.model-field {
+ &::ng-deep.mat-mdc-form-field-subscript-wrapper:has(mat-error) {
+ height: 40px;
+ }
+}
+
.device-form-title {
color: $grey-800;
font-size: 22px;
diff --git a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts
index 83d869277..4ffbb402e 100644
--- a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts
+++ b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts
@@ -221,6 +221,29 @@ describe('DeviceFormComponent', () => {
expect(errors).toBeNull();
});
});
+
+ it('should have "invalid_format" error when field does not satisfy validation rules', () => {
+ [
+ 'very long value very long value very long value very long value very long value very long value very long value',
+ 'as&@3$',
+ ].forEach(value => {
+ const model: HTMLInputElement = compiled.querySelector(
+ '.device-form-model'
+ ) as HTMLInputElement;
+ model.value = value;
+ model.dispatchEvent(new Event('input'));
+ component.model.markAsTouched();
+ fixture.detectChanges();
+
+ const modelError = compiled.querySelector('mat-error')?.innerHTML;
+ const error = component.model.hasError('invalid_format');
+
+ expect(error).toBeTruthy();
+ expect(modelError).toContain(
+ 'The device model name must be a maximum of 64 characters. Only letters, numbers, and accented letters are permitted.'
+ );
+ });
+ });
});
describe('device manufacturer', () => {
@@ -240,6 +263,30 @@ describe('DeviceFormComponent', () => {
expect(errors).toBeNull();
});
});
+
+ it('should have "invalid_format" error when field does not satisfy validation', () => {
+ [
+ 'very long value very long value very long value very long value very long value very long value very long value',
+ 'as&@3$',
+ ].forEach(value => {
+ const manufacturer: HTMLInputElement = compiled.querySelector(
+ '.device-form-manufacturer'
+ ) as HTMLInputElement;
+ manufacturer.value = value;
+ manufacturer.dispatchEvent(new Event('input'));
+ component.manufacturer.markAsTouched();
+ fixture.detectChanges();
+
+ const manufacturerError =
+ compiled.querySelector('mat-error')?.innerHTML;
+ const error = component.manufacturer.hasError('invalid_format');
+
+ expect(error).toBeTruthy();
+ expect(manufacturerError).toContain(
+ 'The manufacturer name must be a maximum of 64 characters. Only letters, numbers, and accented letters are permitted.'
+ );
+ });
+ });
});
describe('mac address', () => {