feat: Add Access to NgForm with sacInheritForm directive (simpleangul…

…arcontrols#102)

ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/form/subform.component.html

@@ -1,4 +1,4 @@
-<div style="border: 1px solid" sacInheritForm>
+<div style="border: 1px solid" sacInheritForm #formaccess="sacinheritform">
   <div>SubForm</div>
   <div>
     <sac-input

ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/form/subform.component.ts

@@ -1,21 +1,34 @@
-import { Component } from '@angular/core';
-import { Input } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { Output } from '@angular/core';
-import { DoCheck } from '@angular/core';
-
+import {
+  Component,
+  DoCheck,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { SacInheritFormDirective } from '@simpleangularcontrols/sac-bootstrap3';
 
 @Component({
   selector: 'app-subform',
-  templateUrl: './subform.component.html'
+  templateUrl: './subform.component.html',
 })
 export class DemoSubFormComponent implements DoCheck {
+  // #region Properties
+
+  @Input() public mymodel;
+  @Output() public mymodelChange = new EventEmitter();
+  @ViewChild('formaccess') public form: SacInheritFormDirective;
+
+  // #endregion Properties
 
-  @Input() mymodel;
-  @Output() mymodelChange = new EventEmitter();
+  // #region Public Methods
 
-  ngDoCheck() {
+  public ngDoCheck() {
+    if (this.form) {
+      console.log(this.form.getForm().dirty);
+    }
     this.mymodelChange.next(this.mymodel);
   }
 
+  // #endregion Public Methods
 }

ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/form/subform.component.html

@@ -1,4 +1,4 @@
-<div style="border: 1px solid" sacInheritForm>
+<div style="border: 1px solid" sacInheritForm #formaccess="sacinheritform">
   <div>SubForm</div>
   <div>
     <sac-input

ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/form/subform.component.ts

@@ -1,21 +1,34 @@
-import { Component } from '@angular/core';
-import { Input } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { Output } from '@angular/core';
-import { DoCheck } from '@angular/core';
-
+import {
+  Component,
+  DoCheck,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { SacInheritFormDirective } from '@simpleangularcontrols/sac-bootstrap4';
 
 @Component({
   selector: 'app-subform',
-  templateUrl: './subform.component.html'
+  templateUrl: './subform.component.html',
 })
 export class DemoSubFormComponent implements DoCheck {
+  // #region Properties
+
+  @Input() public mymodel;
+  @Output() public mymodelChange = new EventEmitter();
+  @ViewChild('formaccess') public form: SacInheritFormDirective;
+
+  // #endregion Properties
 
-  @Input() mymodel;
-  @Output() mymodelChange = new EventEmitter();
+  // #region Public Methods
 
-  ngDoCheck() {
+  public ngDoCheck() {
+    if (this.form) {
+      console.log(this.form.getForm().dirty);
+    }
     this.mymodelChange.next(this.mymodel);
   }
 
+  // #endregion Public Methods
 }

ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/form/subform.component.html

@@ -1,4 +1,4 @@
-<div style="border: 1px solid" sacInheritForm>
+<div style="border: 1px solid" sacInheritForm #formaccess="sacinheritform">
   <div>SubForm</div>
   <div>
     <sac-input

ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/form/subform.component.ts

@@ -1,21 +1,34 @@
-import { Component } from '@angular/core';
-import { Input } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { Output } from '@angular/core';
-import { DoCheck } from '@angular/core';
-
+import {
+  Component,
+  DoCheck,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { SacInheritFormDirective } from '@simpleangularcontrols/sac-bootstrap5';
 
 @Component({
   selector: 'app-subform',
-  templateUrl: './subform.component.html'
+  templateUrl: './subform.component.html',
 })
 export class DemoSubFormComponent implements DoCheck {
+  // #region Properties
+
+  @Input() public mymodel;
+  @Output() public mymodelChange = new EventEmitter();
+  @ViewChild('formaccess') public form: SacInheritFormDirective;
+
+  // #endregion Properties
 
-  @Input() mymodel;
-  @Output() mymodelChange = new EventEmitter();
+  // #region Public Methods
 
-  ngDoCheck() {
+  public ngDoCheck() {
+    if (this.form) {
+      console.log(this.form.getForm().dirty);
+    }
     this.mymodelChange.next(this.mymodel);
   }
 
+  // #endregion Public Methods
 }

ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/form/inheritform.directive.md

@@ -0,0 +1,46 @@
+# Examples
+
+## Inherit Form
+
+```html
+<div sacInheritForm>
+  <div>SubForm</div>
+  <div>
+    <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
+  </div>
+</div>
+```
+
+## Inherit Form with access to Form
+
+HTML Template with access to form.
+
+```html
+<div sacInheritForm #formaccess="sacinheritform">
+  <div>SubForm</div>
+  <div>
+    <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
+  </div>
+</div>
+```
+
+Code behind file with access to form.
+
+```ts
+import { Component, Input, Output, ViewChild } from '@angular/core';
+import { SacInheritFormDirective } from '@simpleangularcontrols/sac-bootstrap3';
+
+@Component({
+  selector: 'app-subform',
+  templateUrl: './subform.component.html',
+})
+export class DemoSubFormComponent {
+  @Input() mymodel;
+  @Output() mymodelChange = new EventEmitter();
+  @ViewChild('formaccess') public form: SacInheritFormDirective;
+
+  public accessToForm() {
+    console.log(this.form.getForm().dirty);
+  }
+}
+```

ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/form/inheritform.directive.ts

@@ -1,17 +1,47 @@
-import { Directive } from '@angular/core';
+import { Directive, Injector, SkipSelf } from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { SacFormCommon } from '@simpleangularcontrols/sac-common';
 import { SacFormDirective } from './form';
-import { SkipSelf } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { ControlContainer } from '@angular/forms';
+
+// #region Classes
 
 /**
- * Factory Methode für SacForm
- * @param form NgFormular
+ * Directive to inherit an NgForm/NgForm from a parent component
  */
-export function SACFORM_FACTORY(form: SacFormDirective) {
-  return form;
+@Directive({
+  selector: '[sacInheritForm]',
+  exportAs: 'sacinheritform',
+  providers: [
+    {
+      provide: SacFormDirective,
+      useFactory: SACFORM_FACTORY,
+      deps: [[new SkipSelf(), SacFormDirective]],
+    },
+    {
+      provide: ControlContainer,
+      useFactory: NGFORM_FACTORY,
+      deps: [NgForm],
+    },
+  ],
+})
+export class SacInheritFormDirective extends SacFormCommon {
+  // #region Constructors
+
+  /**
+   * Construtor
+   * @param injector: injector to receive the NgForm instance
+   */
+  constructor(injector: Injector) {
+    super(injector.get(NgForm));
+  }
+
+  // #endregion Constructors
 }
 
+// #endregion Classes
+
+// #region Functions
+
 /**
  * Factory Methode für NgForm
  * @param form NgForm
@@ -21,50 +51,11 @@ export function NGFORM_FACTORY(form: NgForm) {
 }
 
 /**
- * Directive zum erben eines NgForm/NgFormular einer übergeordneten Komponente
- *
- * @example Implementation in Markup
- *
- * <div sacInheritForm>
- * </div>
- *
- * @example Model an Sub-Komponente übergeben
- *
- * <div sacInheritForm>
- * <div>SubForm</div>
- * <div>
- *  <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
- * </div>
- * </div>
- *
- *
- * (at)Component({
- * selector: 'sacInheritForm',
- * templateUrl: './subform.component.html'
- * })
- * export class SubFormComponent implements DoCheck {
- *
- * (at)Input() mymodel;
- * (at)Output() mymodelChange = new EventEmitter();
- *
- * ngDoCheck() {
- *   this.mymodelChange.next(this.mymodel);
- * }
- *}
- *
+ * Factory Methode für SacForm
+ * @param form NgFormular
  */
-@Directive({
-  selector: '[sacInheritForm]',
-  providers: [
-    {
-      provide: SacFormDirective,
-      useFactory: SACFORM_FACTORY,
-      deps: [[new SkipSelf(), SacFormDirective]]
-    }, {
-      provide: ControlContainer,
-      useFactory: NGFORM_FACTORY,
-      deps: [NgForm]
-    }
-  ]
-})
-export class SacInheritFormDirective { }
+export function SACFORM_FACTORY(form: SacFormDirective) {
+  return form;
+}
+
+// #endregion Functions

ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/form/inheritform.directive.md

@@ -0,0 +1,46 @@
+# Examples
+
+## Inherit Form
+
+```html
+<div sacInheritForm>
+  <div>SubForm</div>
+  <div>
+    <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
+  </div>
+</div>
+```
+
+## Inherit Form with access to Form
+
+HTML Template with access to form.
+
+```html
+<div sacInheritForm #formaccess="sacinheritform">
+  <div>SubForm</div>
+  <div>
+    <ngInput [(ngModel)]="mymodel.fieldarea2" name="subformField3" label="field 3" [isrequired]="true"></ngInput>
+  </div>
+</div>
+```
+
+Code behind file with access to form.
+
+```ts
+import { Component, Input, Output, ViewChild } from '@angular/core';
+import { SacInheritFormDirective } from '@simpleangularcontrols/sac-bootstrap4';
+
+@Component({
+  selector: 'app-subform',
+  templateUrl: './subform.component.html',
+})
+export class DemoSubFormComponent {
+  @Input() mymodel;
+  @Output() mymodelChange = new EventEmitter();
+  @ViewChild('formaccess') public form: SacInheritFormDirective;
+
+  public accessToForm() {
+    console.log(this.form.getForm().dirty);
+  }
+}
+```