diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html
index 090f4c3f4f..6bb2ea9fa3 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.html
+++ b/demo-shell-ng2/app/components/login/login-demo.component.html
@@ -12,4 +12,6 @@
         </label>
     </p>
 </div>
-<alfresco-login [providers]="providers" (onSuccess)="onLogin($event)" (onError)="onError($event)"></alfresco-login>
+<alfresco-login (executeOutcome)="validateForm($event)" [providers]="providers"
+                (onSuccess)="onLogin($event)"
+                (onError)="onError($event)" #alfrescologin></alfresco-login>
diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts
index 6df82e500a..7c6a14f62e 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.ts
+++ b/demo-shell-ng2/app/components/login/login-demo.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {AlfrescoLoginComponent} from 'ng2-alfresco-login';
 import {ROUTER_DIRECTIVES, Router} from '@angular/router';
 
@@ -30,6 +30,9 @@ declare let __moduleName: string;
 })
 export class LoginDemoComponent {
 
+    @ViewChild('alfrescologin')
+    alfrescologin: any;
+
     providers: string = 'ECM';
 
     constructor(public router: Router) {
@@ -67,4 +70,13 @@ export class LoginDemoComponent {
             this.providers = undefined;
         }
     }
+
+    validateForm(event: any) {
+        let values = event.values;
+        if (values.controls['username'].value === 'invalidUsername') {
+            this.alfrescologin.addCustomError('username', 'the username is in blacklist');
+            event.preventDefault();
+        }
+    }
+
 }