diff --git a/demo-shell-ng2/app/components/setting/setting.component.css b/demo-shell-ng2/app/components/setting/setting.component.css
index 0e576c8af9..91992ec4aa 100644
--- a/demo-shell-ng2/app/components/setting/setting.component.css
+++ b/demo-shell-ng2/app/components/setting/setting.component.css
@@ -29,3 +29,7 @@
 .table-row {
     display: table-row;
 }
+
+.adf-setting-input-padding{
+    padding-top: 0px !important;
+}
diff --git a/demo-shell-ng2/app/components/setting/setting.component.html b/demo-shell-ng2/app/components/setting/setting.component.html
index 2184da7ff8..3e65b97283 100644
--- a/demo-shell-ng2/app/components/setting/setting.component.html
+++ b/demo-shell-ng2/app/components/setting/setting.component.html
@@ -10,18 +10,31 @@
                     Content Services host URL configuration
                 </div>
                 <nav class="mdl-navigation">
-                    <div class="icon material-icons icon-margin">link</div>
-                    <input type="text" class="mdl-textfield__input" id="ecmHost" data-automation-id="ecmHost"
-                           tabindex="1" (change)="onChangeECMHost($event)" value="{{ecmHost}}"/>
+                    <i class="icon material-icons icon-margin">link</i>
+                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-padding">
+                        <input data-automation-id="ecmHost"
+                               class="mdl-textfield__input" tabindex="1"
+                               type="text" tabindex="1"
+                               (change)="onChangeECMHost($event)"
+                               pattern="^(http|https):\/\/.*" id="ecmHost" value="{{ecmHost}}">
+                        <label class="mdl-textfield__label" for="ecmHost">ECM Host</label>
+                        <span class="mdl-textfield__error">ECM host is not valid!</span>
+                    </div>
                 </nav>
 
                 <div class="mdl-card__supporting-text">
                     Process Services host URL configuration
                 </div>
                 <nav class="mdl-navigation">
-                    <div class="icon material-icons icon-margin">link</div>
-                    <input type="text" class="mdl-textfield__input" id="bpmHost" data-automation-id="bpmHost"
-                           tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
+                    <i class="icon material-icons icon-margin">link</i>
+                    <div class="mdl-textfield mdl-js-textfield adf-setting-input-paddingg">
+                        <input class="mdl-textfield__input"
+                               type="text"
+                               (change)="onChangeBPMHost($event)"
+                               tabindex="2" pattern="^(http|https):\/\/.*" id="bpmHost" value="{{bpmHost}}">
+                        <label class="mdl-textfield__label" for="bpmHost">BPM Host</label>
+                        <span class="mdl-textfield__error">BPM host is not valid!</span>
+                    </div>
                 </nav>
             </div>
             <div class="mdl-card__actions mdl-card--border">
diff --git a/demo-shell-ng2/app/components/setting/setting.component.ts b/demo-shell-ng2/app/components/setting/setting.component.ts
index b0d7d17a53..733007344c 100644
--- a/demo-shell-ng2/app/components/setting/setting.component.ts
+++ b/demo-shell-ng2/app/components/setting/setting.component.ts
@@ -15,15 +15,17 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, AfterViewChecked } from '@angular/core';
 import { AlfrescoSettingsService, StorageService, LogService } from 'ng2-alfresco-core';
 
+declare var componentHandler: any;
+
 @Component({
     selector: 'alfresco-setting-demo',
     templateUrl: './setting.component.html',
     styleUrls: ['./setting.component.css']
 })
-export class SettingComponent {
+export class SettingComponent implements AfterViewChecked {
 
     ecmHost: string;
     bpmHost: string;
@@ -35,24 +37,39 @@ export class SettingComponent {
         this.bpmHost = this.settingsService.bpmHost;
     }
 
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
     public onChangeECMHost(event: KeyboardEvent): void {
         let value = (<HTMLInputElement>event.target).value.trim();
-        if (value) {
+        if (value && this.isValidUrl(value)) {
             this.logService.info(`ECM host: ${value}`);
             this.ecmHost = value;
             this.settingsService.ecmHost = value;
             this.storage.setItem(`ecmHost`, value);
+        } else {
+            console.error('Ecm address does not match the pattern');
         }
     }
 
     public onChangeBPMHost(event: KeyboardEvent): void {
         let value = (<HTMLInputElement>event.target).value.trim();
-        if (value) {
+        if (value && this.isValidUrl(value)) {
             this.logService.info(`BPM host: ${value}`);
             this.bpmHost = value;
             this.settingsService.bpmHost = value;
             this.storage.setItem(`bpmHost`, value);
+        } else {
+            console.error('Bpm address does not match the pattern');
         }
     }
 
+    isValidUrl(url: string) {
+        return /^(http|https):\/\/.*/.test(url);
+    }
+
 }