Merge pull request #401 from jbeck8176/validation_Fix

Validation changes and additions

Author: jbeck8176

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-angular-components",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "Reusable responsive angular components",
   "author": "Renovo Development Team",
   "keywords": [

source/components/cardContainer/card/card.tests.ts

@@ -14,9 +14,14 @@ interface ICardContainerMock {
 	columnTemplates?: any;
 }
 
+interface IGuidServiceMock {
+	random: Sinon.SinonSpy;
+}
+
 describe('CardComponent', () => {
 	let card: CardComponent<any>;
 	let cardContainer: ICardContainerMock;
+	let mockGuidService: IGuidServiceMock;
 
 	beforeEach(() => {
 		cardContainer = {
@@ -25,8 +30,9 @@ describe('CardComponent', () => {
 				remove: sinon.spy(),
 			},
 		};
+		mockGuidService = { random: sinon.spy() };
 
-		card = new CardComponent(new __notification.NotificationService(<any>{}, <any>{}), null, new FormService(), null, <any>cardContainer);
+		card = new CardComponent(new __notification.NotificationService(<any>{}, <any>{}), null, new FormService(), mockGuidService, null, <any>cardContainer);
 	});
 
 	it('should pass the item to the save handler', (): void => {

source/components/cardContainer/card/card.ts

@@ -48,11 +48,13 @@ export class CardComponent<T> extends FormComponent {
 	cardContainer: CardContainerComponent<T>;
 
 	constructor(notification: __notification.NotificationService
-			, asyncHelper: AsyncHelper
-			, formService: FormService
-			, @Optional() @SkipSelf() parentForm: FormComponent
-			, @Inject(forwardRef(() => CardContainerComponent)) cardContainer: CardContainerComponent<T>) {
-		super(notification, asyncHelper, formService, parentForm);
+		, asyncHelper: AsyncHelper
+		, formService: FormService
+		, guidService: services.guid.GuidService
+		, @Optional() @SkipSelf() parentForm: FormComponent
+		, @Inject(forwardRef(() => CardContainerComponent)) cardContainer: CardContainerComponent<T>) {
+
+		super(notification, asyncHelper, formService, guidService, parentForm);
 		this.cardContainer = cardContainer;
 		this.showContent$ = new BehaviorSubject(false);
 	}

source/components/cardContainer/card/selectableCard.tests.ts

@@ -9,16 +9,22 @@ interface ICardContainerMock {
 	setSelected: Sinon.SinonSpy;
 }
 
+interface IGuidServiceMock {
+	random: Sinon.SinonSpy;
+}
+
 describe('SelectableCardComponent', () => {
 	let card: SelectableCardComponent<any>;
 	let cardContainer: ICardContainerMock;
+	let mockGuidService: IGuidServiceMock;
 
 	beforeEach(() => {
 		cardContainer = {
 			setSelected: sinon.spy(),
 		};
+		mockGuidService = { random: sinon.spy() };
 
-		card = new SelectableCardComponent(new __notification.NotificationService(<any>{}, <any>{}), null, new FormService(), null, <any>cardContainer);
+		card = new SelectableCardComponent(new __notification.NotificationService(<any>{}, <any>{}), null, new FormService(), mockGuidService, null, <any>cardContainer);
 		const randomId = 11;
 		card.selection = <any>{ id: randomId };
 	});

source/components/cardContainer/card/selectableCard.ts

@@ -36,11 +36,12 @@ export class SelectableCardComponent<T> extends CardComponent<T> {
 	}
 
 	constructor(notification: __notification.NotificationService
-			, asyncHelper: AsyncHelper
-			, formService: FormService
-			, @Optional() @SkipSelf() parentForm: FormComponent
-			, @Inject(forwardRef(() => CardContainerComponent)) cardContainer: CardContainerComponent<T>) {
-		super(notification, asyncHelper, formService, parentForm, cardContainer);
+		, asyncHelper: AsyncHelper
+		, formService: FormService
+		, guidService: services.guid.GuidService
+		, @Optional() @SkipSelf() parentForm: FormComponent
+		, @Inject(forwardRef(() => CardContainerComponent)) cardContainer: CardContainerComponent<T>) {
+		super(notification, asyncHelper, formService, guidService, parentForm, cardContainer);
 	}
 
 	setSelected(value: boolean): void {

source/components/dialog/dialog.tests.ts

@@ -6,13 +6,19 @@ import { DialogRootService, IDialogClosingHandler } from './dialogRoot.service';
 
 import { AsyncHelper } from '../../services/async/async.service';
 
+interface IGuidServiceMock {
+	random: Sinon.SinonSpy;
+}
+
 describe('DialogComponent', (): void => {
 	let dialog: DialogComponent;
 	let dialogRoot: DialogRootService;
+	let mockGuidService: IGuidServiceMock;
 
 	beforeEach((): void => {
 		dialogRoot = new DialogRootService();
-		dialog = new DialogComponent(<any>{}, new AsyncHelper(), null, dialogRoot);
+		mockGuidService = { random: sinon.spy() };
+		dialog = new DialogComponent(<any>{}, new AsyncHelper(), null, dialogRoot, mockGuidService);
 	});
 
 	it('should open a dialog on the root with the current dialog\'s context', (): void => {

source/components/dialog/dialog.ts

@@ -33,10 +33,12 @@ export class DialogComponent extends FormComponent {
 	dialogRoot: DialogRootService;
 
 	constructor(notification: __notification.NotificationService
-			, asyncHelper: AsyncHelper
-			, formService: FormService
-			, dialogRoot: DialogRootService) {
-		super(notification, asyncHelper, formService, null);
+		, asyncHelper: AsyncHelper
+		, formService: FormService
+		, dialogRoot: DialogRootService
+		, guidService: services.guid.GuidService) {
+
+		super(notification, asyncHelper, formService, guidService, null);
 		this.dialogRoot = dialogRoot;
 	}
 

source/components/form/RecluseForm.ts

@@ -0,0 +1,18 @@
+import { Component, forwardRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { FormComponent } from '../form/form';
+
+@Component({
+	selector: 'rlRecluseForm',
+	template: '<ng-content></ng-content>',
+	providers: [
+		{
+			provide: FormComponent,
+			useExisting: forwardRef(() => RecluseFormComponent),
+		},
+	],
+})
+export class RecluseFormComponent {
+	form = new FormGroup({});
+}

source/components/form/form.tests.ts

@@ -15,16 +15,22 @@ interface IFormServiceMock {
 	getAggregateError?: Sinon.SinonSpy;
 }
 
+interface IGuidServiceMock {
+	random: Sinon.SinonSpy;
+}
+
 describe('FormComponent', (): void => {
 	let form: FormComponent;
 	let notification: INotificationMock;
 	let formService: IFormServiceMock;
+	let mockGuidService: IGuidServiceMock;
 
 	beforeEach((): void => {
 		notification = { warning: sinon.spy() };
 		formService = {};
+		mockGuidService = { random: sinon.spy(() => { return '2979637a-1fc1-4c5e-bf9d-a89154342aba'}) };
 
-		form = new FormComponent(<any>notification, new AsyncHelper(), <any>formService, null);
+		form = new FormComponent(<any>notification, new AsyncHelper(), <any>formService, mockGuidService, null);
 		form.form = <any>{
 			markAsPristine: sinon.spy(),
 		};
@@ -53,10 +59,10 @@ describe('FormComponent', (): void => {
 				addControl: addControlSpy,
 			},
 		};
-		form = new FormComponent(<any>notification, new AsyncHelper(), <any>formService, parentForm);
+		form = new FormComponent(<any>notification, new AsyncHelper(), <any>formService, mockGuidService, parentForm);
 
 		sinon.assert.calledOnce(addControlSpy);
-		sinon.assert.calledWith(addControlSpy, '', form.form);
+		sinon.assert.calledWith(addControlSpy, `form-${mockGuidService.random()}`, form.form);
 	});
 
 	it('should reset the form', () => {

source/components/form/form.ts

@@ -39,9 +39,11 @@ export class FormComponent {
 	}
 
 	constructor(notification: __notification.NotificationService
-			, asyncHelper: AsyncHelper
-			, formService: FormService
-			, @Optional() @SkipSelf() parentForm: FormComponent) {
+		, asyncHelper: AsyncHelper
+		, formService: FormService
+		, guidService: services.guid.GuidService
+		, @Optional() @SkipSelf() parentForm: FormComponent) {
+
 		this.notification = notification;
 		this.asyncHelper = asyncHelper;
 		this.formService = formService;
@@ -51,7 +53,7 @@ export class FormComponent {
 		}
 
 		if (parentForm) {
-			parentForm.form.addControl('', this.form);
+			parentForm.form.addControl(`form-${guidService.random()}`, this.form);
 		}
 	}
 

source/components/form/index.ts

@@ -1,7 +1,8 @@
 import { FormComponent } from './form';
 import { INPUT_DIRECTIVES } from '../inputs/index';
 import { AutosaveDirective } from '../../behaviors/autosave/autosave';
+import { RecluseFormComponent } from './RecluseForm';
 
-export const FORM_DIRECTIVES = [FormComponent, INPUT_DIRECTIVES, AutosaveDirective];
+export const FORM_DIRECTIVES = [FormComponent, INPUT_DIRECTIVES, AutosaveDirective, RecluseFormComponent];
 
 export * from './form';

source/components/simpleCardList/simpleCard.tests.ts

@@ -9,20 +9,26 @@ interface IFormMock {
 	submit: Sinon.SinonSpy;
 }
 
+interface IGuidServiceMock {
+	random: Sinon.SinonSpy;
+}
+
 describe('SimpleCardComponent', () => {
 	let card: SimpleCardComponent<any>;
 	let list: IListMock;
+	let mockGuidService: IGuidServiceMock;
 
 	beforeEach(() => {
 		list = {
 			openCard: sinon.spy(() => true),
 		};
+		mockGuidService = { random: sinon.spy() };
 
-		card = new SimpleCardComponent(<any>{}, null, null, null, null, <any>list);
+		card = new SimpleCardComponent(<any>{}, null, null, mockGuidService, null, null, <any>list);
 	});
 
 	it('should create an empty list if no list is provided', (): void => {
-		card = new SimpleCardComponent(null, null, null, null, null, null);
+		card = new SimpleCardComponent(null, null, null, mockGuidService, null, null, null);
 		expect(card.list).to.exist;
 	});
 
@@ -80,7 +86,7 @@ describe('SimpleCardComponent', () => {
 		});
 
 		it('should be able to open with an empty list', (): void => {
-			card = new SimpleCardComponent(null, null, null, null, null, null);
+			card = new SimpleCardComponent(null, null, null, mockGuidService, null, null, null);
 			const onOpenSpy: Sinon.SinonSpy = sinon.spy();
 			card.onOpen.emit = onOpenSpy;
 			card.ngOnInit();

source/components/simpleCardList/simpleCard.ts

@@ -36,12 +36,14 @@ export class SimpleCardComponent<T> extends FormComponent implements OnInit {
 	alternatingClass: string = '';
 
 	constructor(notification: __notification.NotificationService
-			, asyncHelper: AsyncHelper
-			, formService: FormService
-			, @Optional() @SkipSelf() parentForm: FormComponent
-			, @Optional() nullInjectionConflictsWithCardParameter: AsyncHelper
-			, @Optional() @Inject(forwardRef(() => SimpleCardListComponent)) list: SimpleCardListComponent<T>) {
-		super(notification, asyncHelper, formService, parentForm);
+		, asyncHelper: AsyncHelper
+		, formService: FormService
+		, guidService: services.guid.GuidService
+		, @Optional() @SkipSelf() parentForm: FormComponent
+		, @Optional() nullInjectionConflictsWithCardParameter: AsyncHelper
+		, @Optional() @Inject(forwardRef(() => SimpleCardListComponent)) list: SimpleCardListComponent<T>) {
+
+		super(notification, asyncHelper, formService, guidService, parentForm);
 		this.list = list || this.emptyList();
 	}
 

source/ui.module.ts

@@ -9,6 +9,7 @@ import { ButtonModule } from'./components/buttons/button.module';
 import { CARD_CONTAINER_DIRECTIVES } from'./components/cardContainer/index';
 import { CommaListComponent } from'./components/commaList/commaList';
 import { DIALOG_DIRECTIVES } from'./components/dialog/index';
+import { RecluseFormComponent } from'./components/form/RecluseForm';
 import { FormComponent } from'./components/form/form';
 import { INPUT_DIRECTIVES } from'./components/inputs/index';
 import { MultiStepIndicatorComponent } from'./components/multiStepIndicator/multiStepIndicator';
@@ -41,6 +42,7 @@ export const componentsList: any[] = [
 	CARD_CONTAINER_DIRECTIVES,
 	CommaListComponent,
 	DIALOG_DIRECTIVES,
+	RecluseFormComponent,
 	FormComponent,
 	INPUT_DIRECTIVES,
 	MultiStepIndicatorComponent,