diff --git a/ui/package-lock.json b/ui/package-lock.json
index 25fad932c..4595deae4 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -3511,7 +3511,6 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
-      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -6468,8 +6467,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6490,14 +6488,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6512,20 +6508,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6642,8 +6635,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6655,7 +6647,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6670,7 +6661,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6678,14 +6668,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -6704,7 +6692,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6785,8 +6772,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6798,7 +6784,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6884,8 +6869,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6921,7 +6905,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6941,7 +6924,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6985,14 +6967,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -9302,8 +9282,7 @@
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
           "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "http-signature": {
           "version": "1.2.0",
@@ -9545,8 +9524,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "loose-envify": {
       "version": "1.3.1",
@@ -10204,17 +10182,18 @@
       }
     },
     "ngx-schema-form": {
-      "version": "2.2.0-beta.1",
-      "resolved": "https://registry.npmjs.org/ngx-schema-form/-/ngx-schema-form-2.2.0-beta.1.tgz",
-      "integrity": "sha512-tNJR/rFEU2zHAOKOl47ujqM/7y08x8slPYyozgUgKt6aJa5JATqzf2Ee0WAF0fYrJzN4diF1fpNWHYqoA3qDGg==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/ngx-schema-form/-/ngx-schema-form-2.3.5.tgz",
+      "integrity": "sha512-MAenwMUhY/Mi4OuDOzeo+l5iBScIQ5e6q4V+pRanvlGWkNXrvVaDIzEUxs6XHiYSe1s3q9qJsEJQU++WUpVjgA==",
       "requires": {
-        "tslib": "^1.9.0"
+        "tslib": "^1.9.0",
+        "z-schema": "^3.17.0"
       },
       "dependencies": {
         "tslib": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
         }
       }
     },
diff --git a/ui/package.json b/ui/package.json
index b293be085..ced90da0f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -44,7 +44,7 @@
     "file-saver": "^1.3.3",
     "font-awesome": "^4.7.0",
     "ngx-infinite-scroll": "^7.2.0",
-    "ngx-schema-form": "^2.2.0-beta.1",
+    "ngx-schema-form": "2.3.5",
     "rxjs": "^6.5.1",
     "rxjs-compat": "^6.5.1",
     "xml-formatter": "^1.0.1",
diff --git a/ui/src/app/metadata/metadata.module.ts b/ui/src/app/metadata/metadata.module.ts
index 6867ed75c..b116d3d34 100644
--- a/ui/src/app/metadata/metadata.module.ts
+++ b/ui/src/app/metadata/metadata.module.ts
@@ -10,8 +10,7 @@ import { MetadataRoutingModule } from './metadata.routing';
 import { ProviderModule } from './provider/provider.module';
 import { I18nModule } from '../i18n/i18n.module';
 import { CustomWidgetRegistry } from '../schema-form/registry';
-import { WidgetRegistry, SchemaValidatorFactory } from 'ngx-schema-form';
-import { CustomSchemaValidatorFactory } from '../schema-form/service/schema-validator';
+import { WidgetRegistry } from 'ngx-schema-form';
 import { MetadataConfigurationModule } from './configuration/configuration.module';
 import { NavigationService } from '../core/service/navigation.service';
 import { MetadataResolver } from './domain/model';
@@ -32,11 +31,7 @@ import { Router } from '@angular/router';
         I18nModule
     ],
     providers: [
-        { provide: WidgetRegistry, useClass: CustomWidgetRegistry },
-        {
-            provide: SchemaValidatorFactory,
-            useClass: CustomSchemaValidatorFactory
-        }
+        { provide: WidgetRegistry, useClass: CustomWidgetRegistry }
     ],
     declarations: [
         MetadataPageComponent
diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
index 13aba1369..842e903dd 100644
--- a/ui/src/app/schema-form/schema-form.module.ts
+++ b/ui/src/app/schema-form/schema-form.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { SchemaFormModule, SchemaValidatorFactory } from 'ngx-schema-form';
+import { SchemaFormModule } from 'ngx-schema-form';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 
@@ -23,7 +23,6 @@ import { CustomObjectWidget } from './widget/object/object.component';
 import { CustomRadioComponent } from './widget/radio/radio.component';
 import { InlineObjectListComponent } from './widget/array/inline-obj-list.component';
 import { InlineObjectComponent } from './widget/object/inline-obj.component';
-import { CustomSchemaValidatorFactory } from './service/schema-validator';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
diff --git a/ui/src/app/schema-form/service/schema-validator.ts b/ui/src/app/schema-form/service/schema-validator.ts
deleted file mode 100644
index 075a78ec9..000000000
--- a/ui/src/app/schema-form/service/schema-validator.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as ZSchema from 'z-schema';
-import { ZSchemaValidatorFactory } from 'ngx-schema-form';
-
-export class CustomSchemaValidatorFactory extends ZSchemaValidatorFactory {
-
-    protected zschema;
-
-    constructor() {
-        super();
-        this.createSchemaValidator();
-    }
-
-    private createSchemaValidator() {
-        this.zschema = new ZSchema({
-            breakOnFirstError: false
-        });
-    }
-}
-
diff --git a/ui/src/app/schema-form/widget/array/array.component.ts b/ui/src/app/schema-form/widget/array/array.component.ts
index 44f5a90a8..18f93566e 100644
--- a/ui/src/app/schema-form/widget/array/array.component.ts
+++ b/ui/src/app/schema-form/widget/array/array.component.ts
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 
 import { ArrayWidget } from 'ngx-schema-form';
 import { map } from 'rxjs/operators';
@@ -40,7 +40,7 @@ export class CustomArrayComponent extends ArrayWidget implements AfterViewInit {
         this.hasErrors$ = this.errors$.pipe(map(errors => !!errors.length));
     }
 
-    removeItem(index: number, item: FormProperty = null): void {
+    removeItem(item: FormProperty = null): void {
         this.formProperty.properties = (<FormProperty[]>this.formProperty.properties).filter(i => i !== item);
         this.formProperty.updateValueAndValidity(false, true);
     }
diff --git a/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts b/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts
index 31a15068a..0062cd0f3 100644
--- a/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts
+++ b/ui/src/app/schema-form/widget/array/inline-obj-list.component.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 
-import { ObjectWidget } from 'ngx-schema-form';
 import { CustomArrayComponent } from './array.component';
 
 /* tslint:disable */
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
index 9574c5e75..c3c090e19 100644
--- a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
+++ b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -9,7 +9,7 @@
     <div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
         <label class="control-label">
             <input
-                [id]="name + '-' + i"
+                [id]="formProperty._canonicalPath"
                 [formControl]="control"
                 [name]="name"
                 [value]="option.enum[0]"
diff --git a/ui/src/app/schema-form/widget/button/icon-button.component.html b/ui/src/app/schema-form/widget/button/icon-button.component.html
index cb830c4df..7ed1f4f3b 100644
--- a/ui/src/app/schema-form/widget/button/icon-button.component.html
+++ b/ui/src/app/schema-form/widget/button/icon-button.component.html
@@ -1,4 +1,9 @@
-<button class="btn btn-link text-right" [ngSwitch]="button.id" (click)="this.action($event)" *ngIf="this.visible">
+<button
+    [id]="formProperty._canonicalPath"
+    class="btn btn-link text-right"
+    [ngSwitch]="button.id"
+    (click)="this.action($event)"
+    *ngIf="this.visible">
     <i class="fa fa-eye fa-lg text-success" *ngSwitchCase="'preview'"></i>
     <i class="fa fa-floppy-o fa-lg text-info" *ngSwitchDefault></i>
 </button>
\ No newline at end of file
diff --git a/ui/src/app/schema-form/widget/button/icon-button.component.ts b/ui/src/app/schema-form/widget/button/icon-button.component.ts
index 01efc1f74..f023330b6 100644
--- a/ui/src/app/schema-form/widget/button/icon-button.component.ts
+++ b/ui/src/app/schema-form/widget/button/icon-button.component.ts
@@ -1,9 +1,7 @@
 import {
     Component, AfterViewInit, ChangeDetectorRef
 } from '@angular/core';
-import { ButtonWidget } from 'ngx-schema-form';
-import { ActionRegistry } from 'ngx-schema-form';
-import { interval } from 'rxjs';
+import { ButtonWidget, ActionRegistry } from 'ngx-schema-form';
 
 @Component({
     selector: 'icon-button',
diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
index 8ad2962ab..9188b4a6d 100644
--- a/ui/src/app/schema-form/widget/check/checkbox.component.html
+++ b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -8,9 +8,9 @@
                     [indeterminate]="control.value !== false && control.value !== true ? true :null"
                     type="checkbox"
                     [attr.disabled]="schema.readOnly?true:null"
-                    id="{{ name }}"
+                    [id]="formProperty._canonicalPath"
                     [disableValidation]="true">
-                <label for="{{ name }}" class="custom-control-label" [translate]="schema.title">
+                <label [attr.for]="formProperty._canonicalPath" class="custom-control-label" [translate]="schema.title">
                     {{ schema.title }}
                 </label>
             </div>
@@ -21,8 +21,10 @@
     </ng-container>
     <ng-container *ngIf="schema.type === 'array'">
         <div *ngFor="let option of schema.items.oneOf" class="checkbox">
-            <label class="horizontal control-label">
-                <input [attr.name]="name" 
+            <label class="horizontal control-label" [attr.for]="formProperty._canonicalPath">
+                <input
+                    [id]="formProperty._canonicalPath"
+                    [attr.name]="name" 
                     value="{{option.enum[0]}}"
                     type="checkbox"
                     [attr.disabled]="schema.readOnly?true:null"
diff --git a/ui/src/app/schema-form/widget/check/checklist.component.html b/ui/src/app/schema-form/widget/check/checklist.component.html
index aae299bf9..cb1dbf022 100644
--- a/ui/src/app/schema-form/widget/check/checklist.component.html
+++ b/ui/src/app/schema-form/widget/check/checklist.component.html
@@ -17,7 +17,7 @@
                                 class="custom-control-input"
                                 (change)="onCheck(attr.key)"
                                 [checked]="checked[attr.key]"
-                                id="input-{{ i }}"
+                                [id]="formProperty._canonicalPath + '.' + i"
                                 [attr.name]="attr.label | translate"
                                 [attr.aria-label]="attr.label | translate"
                                 role="checkbox"
@@ -35,7 +35,7 @@
             <tr>
                 <td scope="col" translate="label.check-all-attributes">Check All Attributes</td>
                 <td scope="col">
-                    <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()">
+                    <button class="btn btn-text text-success btn-sm" (click)="onCheckAll()" [id]="formProperty._canonicalPath + '.checkall'">
                         <i class="fa fa-fw fa-check"></i>
                         <span class="sr-only" translate="label.check-all-attributes">Check All Attributes</span>
                     </button>
@@ -44,7 +44,7 @@
             <tr>
                 <td scope="col" translate="label.clear-all-attributes">Clear All Attributes</td>
                 <td scope="col">
-                    <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()">
+                    <button class="btn btn-text text-danger btn-sm" (click)="onCheckNone()" [id]="formProperty._canonicalPath + '.clearall'">
                         <i class="fa fa-fw fa-times"></i>
                         <span class="sr-only" translate="label.clear-all-attributes">Clear All Attributes</span>
                     </button>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
index ece3d7878..a4f377035 100644
--- a/ui/src/app/schema-form/widget/datalist/datalist.component.html
+++ b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -10,8 +10,8 @@
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <auto-complete
-        [id]="id"
-        [fieldId]="id"
+        [id]="formProperty._canonicalPath"
+        [fieldId]="formProperty._canonicalPath"
         [formControl]="control"
         [matches]="schema.widget.data"
         [required]="true"
diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
index 06c194a3c..a5deb2e19 100644
--- a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
+++ b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -11,6 +11,7 @@
                 </label>
                 <div ngbDropdown>
                     <button ngbDropdownToggle
+                        [id]="formProperty._canonicalPath + '.valuedd'"
                         class="btn btn-outline-secondary dropdown-toggle"
                         type="button"
                         data-toggle="dropdown"
@@ -47,7 +48,7 @@
                     <div class="w-100" [ngSwitch]="this.targetType">
                         <ng-container *ngSwitchDefault>
                             <auto-complete
-                                [fieldId]="'targetInput'"
+                                [fieldId]="formProperty._canonicalPath + '.target'"
                                 class="component-control"
                                 limit="10"
                                 [formControl]="search"
@@ -59,7 +60,7 @@
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'CONDITION_SCRIPT'">
-                            <p id="targetInput" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
+                            <p [id]="formProperty._canonicalPath + '.target'" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
                             <small id="script-help" class="text-danger">
                                 <ng-container *ngIf="script.invalid && script.touched">
                                     <translate-i18n key="message.required-for-scripts">Required for Scripts</translate-i18n>
@@ -68,7 +69,7 @@
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'REGEX'">
-                            <input id="targetInput" class="form-control" type="text" [formControl]="script" name="script" />
+                            <input [id]="formProperty._canonicalPath + '.target'" class="form-control" type="text" [formControl]="script" name="script" />
                             <small id="regex-help" class="form-text text-secondary">
                                 <translate-i18n key="message.required-for-regex">Required for Regex</translate-i18n>
                                 &nbsp;
diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
index aa07e2fbb..c1c78d34c 100644
--- a/ui/src/app/schema-form/widget/number/number.component.html
+++ b/ui/src/app/schema-form/widget/number/number.component.html
@@ -10,6 +10,7 @@
     </label>
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
     <input [attr.readonly]="schema.readOnly?true:null"
+        [id]="formProperty._canonicalPath"
         [name]="name"
         class="text-widget integer-widget form-control"
         [formControl]="control"
diff --git a/ui/src/app/schema-form/widget/radio/radio.component.html b/ui/src/app/schema-form/widget/radio/radio.component.html
index 6c8526eae..fb7a91860 100644
--- a/ui/src/app/schema-form/widget/radio/radio.component.html
+++ b/ui/src/app/schema-form/widget/radio/radio.component.html
@@ -3,7 +3,7 @@
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
     <ng-container *ngFor="let option of schema.oneOf">
         <div class="form-check" [ngClass]="schema.widget.class">
-            <input class="form-check-input" [formControl]="control" type="radio" [attr.name]="name" [id]="name" value="{{option.enum[0]}}" [attr.disabled]="schema.readOnly">
+            <input class="form-check-input" [formControl]="control" type="radio" [attr.name]="name" [id]="formProperty._canonicalPath" value="{{option.enum[0]}}" [attr.disabled]="schema.readOnly">
             <label class="form-check-label" [for]="name" [translate]="option.description">{{option.description}}</label>
         </div>
     </ng-container>
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
index a7d1dd2ff..e923b7c6d 100644
--- a/ui/src/app/schema-form/widget/select/select.component.html
+++ b/ui/src/app/schema-form/widget/select/select.component.html
@@ -15,7 +15,7 @@
         {{ schema.description }}
     </span>
     <select *ngIf="schema.type !== 'array'"
-        [id]="id"
+        [id]="formProperty._canonicalPath"
         [formControl]="control"
         [attr.name]="name"
         class="form-control"
@@ -36,7 +36,12 @@
             <option *ngFor="let option of options$ | async" [ngValue]="option.value" [translate]="option.label">{{ option.label }}</option>
         </ng-container>
     </select>
-    <select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
+    <select *ngIf="schema.type === 'array'"
+        [id]="formProperty._canonicalPath"
+        multiple [formControl]="control"
+        [attr.name]="name"
+        [attr.disabled]="schema.readOnly"
+        class="form-control">
         <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
index 4986846ff..a279bad23 100644
--- a/ui/src/app/schema-form/widget/string/string.component.html
+++ b/ui/src/app/schema-form/widget/string/string.component.html
@@ -15,14 +15,14 @@
         class="text-widget.id textline-widget form-control"
         [class.is-invalid]="control.touched && !control.value && errorMessages.length"
         [attr.type]="this.getInputType()"
-        [attr.id]="id"
+        [id]="formProperty._canonicalPath"
         [formControl]="control"
         [attr.placeholder]="schema.placeholder | translate"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null"
         [attr.aria-label]="schema.title">
-    <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [attr.name]="name" type="hidden" [formControl]="control">
+    <input *ngIf="(schema.widget.id === 'color' && schema.readOnly)" [id]="formProperty._canonicalPath" [attr.name]="name" type="hidden" [formControl]="control">
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         <ng-container *ngFor="let error of errorMessages; let first=first;">
             <ng-container *ngIf="!first">, </ng-container>
diff --git a/ui/src/app/schema-form/widget/string/string.component.ts b/ui/src/app/schema-form/widget/string/string.component.ts
index f144e6f8e..22cdf8d4f 100644
--- a/ui/src/app/schema-form/widget/string/string.component.ts
+++ b/ui/src/app/schema-form/widget/string/string.component.ts
@@ -1,6 +1,5 @@
 import { Component, AfterViewInit, OnDestroy } from '@angular/core';
 import { StringWidget } from 'ngx-schema-form';
-import { Validators } from '@angular/forms';
 import { SchemaService } from '../../service/schema.service';
 import { startWith } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
index d47d6007d..117997562 100644
--- a/ui/src/app/schema-form/widget/textarea/textarea.component.html
+++ b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -10,6 +10,7 @@
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <textarea [attr.readonly]="schema.readOnly?true:null"
+        [id]="formProperty._canonicalPath"
         [name]="name"
         class="text-widget textarea-widget form-control"
         [attr.placeholder]="schema.placeholder"
diff --git a/ui/src/app/schema-form/widget/widget.component.scss b/ui/src/app/schema-form/widget/widget.component.scss
index 278567f46..e69de29bb 100644
--- a/ui/src/app/schema-form/widget/widget.component.scss
+++ b/ui/src/app/schema-form/widget/widget.component.scss
@@ -1,7 +0,0 @@
-:host {
-    .widget {
-        .popover {
-            
-        }
-    }
-}
\ No newline at end of file