Merge pull request #29 from klippa-app/remove-form-element-host-di-de…

…corator Remove form element host di decorator
klippa-app · Aug 8, 2023 · 2aed107 · 2aed107
2 parents 30acbfe + 2be7dbf
commit 2aed107
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 4 deletions.
diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -1,5 +1,7 @@
 <klp-form [formGroup]="myForm">
 	<div style="height: 500px; overflow: auto">
+		<app-deep-input>
+		</app-deep-input>
 		<klp-form-element caption="Name" spaceDistribution="34-66">
 			<klp-form-text-input formControlName="name" [hasBorderLeft]="false" [hasBorderRight]="false">
 			</klp-form-text-input>

diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -23,6 +23,7 @@ export class AppComponent {
 	isChecked: boolean = undefined;
 
 	public myForm = this.fb.group({
+		deepInput: ['', Validators.required],
 		name: [''],
 		emails: [''],
 		disabledButRendered: ['disabledButRendered'],

diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts
@@ -6,6 +6,7 @@ import {AppComponent} from './app.component';
 import {NgxEnhancyFormsModule} from '@klippa/ngx-enhancy-forms';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {SubFormExampleComponent} from './subForm/sub-form-example.component';
+import DeepInputComponent from './deep-input/deep-input.component';
 
 @NgModule({
 	imports: [
@@ -18,6 +19,7 @@ import {SubFormExampleComponent} from './subForm/sub-form-example.component';
 	declarations: [
 		AppComponent,
 		SubFormExampleComponent,
+		DeepInputComponent,
 	],
 	providers: [],
 	bootstrap: [AppComponent]

diff --git a/projects/demo/src/app/deep-input/deep-input.component.html b/projects/demo/src/app/deep-input/deep-input.component.html
@@ -0,0 +1,6 @@
+<ng-container [formGroup]="fg.form">
+	<klp-form-element caption="deep input">
+		<klp-form-text-input formControlName="deepInput">
+		</klp-form-text-input>
+	</klp-form-element>
+</ng-container>
diff --git a/projects/demo/src/app/deep-input/deep-input.component.ts b/projects/demo/src/app/deep-input/deep-input.component.ts
@@ -0,0 +1,10 @@
+import { Component, inject } from "@angular/core";
+import { FormGroupDirective } from "@angular/forms";
+
+@Component({
+	selector: 'app-deep-input',
+	templateUrl: './deep-input.component.html',
+})
+export default class DeepInputComponent {
+	protected fg = inject(FormGroupDirective);
+}
diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.6.2",
+  "version": "14.7.0",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts
@@ -39,10 +39,9 @@ export class FormElementComponent {
 	private input: ValueAccessorBase<any>;
 
 	constructor(
-		@Host() @Optional() private parent: FormComponent,
+		 @Optional() private parent: FormComponent,
 		@Inject(FORM_ERROR_MESSAGES) @Optional() private customMessages: CustomErrorMessages,
-	) {
-	}
+	) {}
 
 	public shouldShowErrorMessages(): boolean {
 		return this.parent?.showErrorMessages !== false;