Use the custom validation

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>

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();
+        }
+    }
+
 }