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. */