update parser component

Author: alhazmy13

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="">
-    <img alt="docsify" src="https://avatars.githubusercontent.com/u/114390448" style="width: 150px">
+    <img alt="godzilla" src="https://user-images.githubusercontent.com/4659608/197927721-8e3a85ca-4c4b-4a26-88c1-2143839508f2.png" style="width: 350px">
   </a>
 </p>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@godzilla-forms/angular-parser",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "Godzilla Forms parser library for angular",
   "private": false,
   "publishConfig": {
@@ -30,7 +30,7 @@
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
     "@angular/forms": "^14.0.0",
-    "@godzilla-forms/core": "^0.0.9",
+    "@godzilla-forms/core": "^0.0.12",
     "rxjs": "~7.5.7"
   },
   "devDependencies": {

package.json

@@ -1,31 +1,31 @@
 <ng-container>
-	<div class="invalid-feedback d-block" *ngIf="submitted && getFormController().invalid">
-		<span *ngIf="getFormController().errors!!['pattern']" class="is-invalid">
+	<div class="invalid-feedback d-block" *ngIf="submitted && form.invalid">
+		<span *ngIf="errorList['pattern']" class="is-invalid">
 			{{ control.errors?.pattern ? control.errors?.pattern : "Field is not valid" }}
 		</span>
-		<span *ngIf="getFormController().errors!!['required']" class="is-invalid">
+		<span *ngIf="errorList['required']" class="is-invalid">
 			{{ control.errors?.required ? control.errors?.required : "Field is required" }}
 		</span>
-		<span *ngIf="getFormController().errors!!['maxlength']" class="is-invalid">
+		<span *ngIf="errorList['maxlength']" class="is-invalid">
 			{{
 				control.errors?.maxLength
 					? control.errors?.maxLength
 					: "Value cannot <" + control.validators?.maxLength
 			}}
 		</span>
-		<span *ngIf="getFormController().errors!!['minlength']" class="is-invalid">{{
+		<span *ngIf="errorList['minlength']" class="is-invalid">{{
 			control.errors?.minLength
 				? control.errors?.minLength
 				: "Value cannot >" + control.validators?.minLength
 		}}</span>
-		<span *ngIf="getFormController().errors!!['max']" class="is-invalid">{{
+		<span *ngIf="errorList['max']" class="is-invalid">{{
 			control.errors?.max ? control.errors?.max : "Value cannot <" + control.validators?.max
 		}}</span>
-		<span *ngIf="getFormController().errors!!['min']" class="is-invalid">{{
+		<span *ngIf="errorList['min']" class="is-invalid">{{
 			control.errors?.min ? control.errors?.min : "Value cannot >" + control.validators?.min
 		}}</span>
-		<span *ngIf="getFormController().errors!!['maxSize']" class="is-invalid">maxSize</span>
-		<span *ngIf="getFormController().errors!!['invalidMimeType']" class="is-invalid"
+		<span *ngIf="errorList['maxSize']" class="is-invalid">maxSize</span>
+		<span *ngIf="errorList['invalidMimeType']" class="is-invalid"
 			>invalidMimeType</span
 		>
 	</div>

src/components/controller/error/error-controller.component.html

@@ -24,7 +24,11 @@ export class ErrorControllerComponent implements OnInit {
 		this.form = <FormGroup>this.controlContainer.control;
 	}
 
-	getFormController() {
-		return this.form.get(this.controlName)!!;
+	get errorList() {
+		const errors = this.form.get(this.controlName)?.errors;
+		if (errors) {
+			return errors;
+		}
+		return [];
 	}
 }

src/components/controller/error/error-controller.component.ts

@@ -1,5 +1,5 @@
-<div [formGroup]="form" class="row needs-validation">
-	<div *ngFor="let page of jsonForm?.pages" class="row">
+<div [formGroup]="formGroup" class="row needs-validation">
+	<div *ngFor="let page of form?.pages" class="row">
 		<div *ngFor="let control of page.controls" [class]="getCssClass(control)">
 			<div
 				*ngIf="isFlowValid(control)"
@@ -54,7 +54,7 @@
 		</div>
 	</div>
 	<godzilla-forms-button-controller
-		*ngIf="jsonForm?.style?.showSubmitButton"
+		*ngIf="form?.style?.showSubmitButton"
 		(onClick)="validate()"
-		[label]="jsonForm?.style?.submitLabel"></godzilla-forms-button-controller>
+		[label]="form?.style?.submitLabel"></godzilla-forms-button-controller>
 </div>

src/components/form-parser.component.html

@@ -17,31 +17,34 @@ import { controlCssClass, controlFlow, controlValidators } from '../utils/contro
 	styleUrls: [],
 })
 export class GodzillaFormsParserComponent implements OnChanges {
-	@Input() jsonForm: GodzillaForm | undefined;
+	@Input() form: GodzillaForm | undefined;
+
+	@Input() jsonForm: string | undefined;
 
 	@Input() enableGridSystem: boolean = true;
 
 	@Output() readonly validData: EventEmitter<any> = new EventEmitter<any>();
 
 	submitted = false;
 
-	readonly form: FormGroup = this.formBuilder.group({});
+	readonly formGroup: FormGroup = this.formBuilder.group({});
 
 	constructor(private formBuilder: FormBuilder, private godzillaLoader: GodzillaLoaderService) {}
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	ngOnChanges(changes: SimpleChanges) {
-		if (this.jsonForm) {
-			this.createPages(this.jsonForm.pages);
+		if (this.form || this.jsonForm) {
+			this.form = this.form || (JSON.parse(this.jsonForm || '') as GodzillaForm);
+			this.createPages(this.form.pages);
 		}
 	}
 
 	/**
 	 * Public function to notify the parser component to reset the form
 	 */
 	public notifyFormChanged() {
-		if (this.jsonForm) {
-			this.createPages(this.jsonForm.pages);
+		if (this.form) {
+			this.createPages(this.form.pages);
 		}
 	}
 
@@ -51,8 +54,8 @@ export class GodzillaFormsParserComponent implements OnChanges {
 	 */
 	public validate() {
 		this.submitted = true;
-		if (this.form.valid) {
-			this.validData.emit(this.form.getRawValue());
+		if (this.formGroup.valid) {
+			this.validData.emit(this.formGroup.getRawValue());
 		}
 	}
 
@@ -63,7 +66,7 @@ export class GodzillaFormsParserComponent implements OnChanges {
 	 * @private
 	 */
 	getFormControllerById(id: string) {
-		return this.form.get(id);
+		return this.formGroup.get(id);
 	}
 
 	/**
@@ -75,11 +78,11 @@ export class GodzillaFormsParserComponent implements OnChanges {
 		// eslint-disable-next-line no-restricted-syntax
 		for (const page of pages) {
 			// eslint-disable-next-line no-continue
-			if (this.jsonForm?.style.type === GodzillaFormType.classic) {
-				this.createForm(page.controls, this.form);
+			if (this.form?.style.type === GodzillaFormType.classic) {
+				this.createForm(page.controls, this.formGroup);
 			} else {
 				const group = this.formBuilder.group({});
-				this.form.addControl(page.id, group);
+				this.formGroup.addControl(page.id, group);
 			}
 		}
 	}

src/components/form-parser.component.ts

@@ -35,6 +35,14 @@ import { ButtonControllerComponent } from './components/controller/button/button
 })
 export class GodzillaParserModule {
 	public static forRoot(config?: GodzillaOptions): ModuleWithProviders<GodzillaParserModule> {
+		return this.getConfig(config);
+	}
+
+	public static forChild(config?: GodzillaOptions): ModuleWithProviders<GodzillaParserModule> {
+		return this.getConfig(config);
+	}
+
+	private static getConfig(config?: GodzillaOptions) {
 		return {
 			ngModule: GodzillaParserModule,
 			providers: [
@@ -45,11 +53,4 @@ export class GodzillaParserModule {
 			],
 		};
 	}
-
-	public static forChild(): ModuleWithProviders<GodzillaParserModule> {
-		return {
-			ngModule: GodzillaParserModule,
-			providers: [],
-		};
-	}
 }

src/parser.module.ts

@@ -61,3 +61,5 @@ export function controlFlow(control: GodzillaFormControls, rootController: any)
 			return true;
 	}
 }
+
+