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 41df23fbf7..14bff32c37 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.html
+++ b/demo-shell-ng2/app/components/login/login-demo.component.html
@@ -12,6 +12,7 @@
-
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 1afa49d1b1..a79cd90d33 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.ts
+++ b/demo-shell-ng2/app/components/login/login-demo.component.ts
@@ -15,9 +15,10 @@
* limitations under the License.
*/
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, OnInit} from '@angular/core';
import {AlfrescoLoginComponent} from 'ng2-alfresco-login';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
+import {Validators} from '@angular/common';
declare let __moduleName: string;
@@ -28,14 +29,24 @@ declare let __moduleName: string;
directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent],
pipes: []
})
-export class LoginDemoComponent {
+export class LoginDemoComponent implements OnInit {
@ViewChild('alfrescologin')
alfrescologin: any;
providers: string = 'ECM';
+ customValidation: any;
constructor(public router: Router) {
+ this.customValidation = {
+ username: ['', Validators.compose([Validators.required, Validators.minLength(8), , Validators.maxLength(10)])],
+ password: ['', Validators.required]
+ };
+ }
+
+ ngOnInit() {
+ this.alfrescologin.addCustomValidationError('username', 'minlength', 'Username must be at least 8 characters.');
+ this.alfrescologin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
}
onLogin($event) {
@@ -74,7 +85,7 @@ export class LoginDemoComponent {
validateForm(event: any) {
let values = event.values;
if (values.controls['username'].value === 'invalidUsername') {
- this.alfrescologin.addCustomError('username', 'This particular username has been blocked');
+ this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
event.preventDefault();
}
}
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
index 35e94c38cb..f7323ee35d 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
@@ -16,7 +16,7 @@
*/
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from '@angular/common';
+import { FORM_DIRECTIVES, ControlGroup, FormBuilder } from '@angular/common';
import {
AlfrescoTranslationService,
AlfrescoPipeTranslate,
@@ -52,6 +52,9 @@ export class AlfrescoLoginComponent implements OnInit {
@Input()
providers: string;
+ @Input()
+ fieldsValidation: any;
+
@Output()
onSuccess = new EventEmitter();
@@ -83,16 +86,13 @@ export class AlfrescoLoginComponent implements OnInit {
private translate: AlfrescoTranslationService) {
translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src');
+
+ this.initFormError();
+ this.initFormMessages();
}
ngOnInit() {
- this.initFormError();
- this.initFormMessages();
-
- this.form = this._fb.group({
- username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
- password: ['', Validators.required]
- });
+ this.form = this._fb.group(this.fieldsValidation);
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
}
@@ -179,14 +179,24 @@ export class AlfrescoLoginComponent implements OnInit {
}
/**
- * Add a new custom error for a field
+ * Add a custom form error for a field
* @param field
* @param msg
*/
- public addCustomError(field: string, msg: string) {
+ public addCustomFormError(field: string, msg: string) {
this.formError[field] += msg;
}
+ /**
+ * Add a custom validation rule error for a field
+ * @param field
+ * @param ruleId - i.e. required | minlength | maxlength
+ * @param msg
+ */
+ public addCustomValidationError(field: string, ruleId: string, msg: string) {
+ this._message[field][ruleId] = msg;
+ }
+
/**
* Display and hide the password value.
*/