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,25 +1,40 @@
-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 { FormsModule } from '@angular/forms';
-import { SACBootstrap3FormModule, SACBootstrap3InputModule } from '@simpleangularcontrols/sac-bootstrap3';
-
+import {
+  SACBootstrap3FormModule,
+  SACBootstrap3InputModule,
+} from '@simpleangularcontrols/sac-bootstrap3';
 
 @Component({
-    selector: 'app-subform',
-    templateUrl: './subform.component.html',
-    standalone: true,
-    imports: [SACBootstrap3FormModule, SACBootstrap3InputModule, FormsModule]
+  selector: 'app-subform',
+  templateUrl: './subform.component.html',
+  standalone: true,
+  imports: [SACBootstrap3FormModule, SACBootstrap3InputModule, FormsModule],
 })
 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,25 +1,40 @@
-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 { FormsModule } from '@angular/forms';
-import { SACBootstrap4FormModule, SACBootstrap4InputModule } from '@simpleangularcontrols/sac-bootstrap4';
-
+import {
+  SACBootstrap4FormModule,
+  SACBootstrap4InputModule,
+} from '@simpleangularcontrols/sac-bootstrap4';
 
 @Component({
-    selector: 'app-subform',
-    templateUrl: './subform.component.html',
-    standalone: true,
-    imports: [SACBootstrap4FormModule, SACBootstrap4InputModule, FormsModule]
+  selector: 'app-subform',
+  templateUrl: './subform.component.html',
+  standalone: true,
+  imports: [SACBootstrap4FormModule, SACBootstrap4InputModule, FormsModule],
 })
 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,8 +1,11 @@
-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 { FormsModule } from '@angular/forms';
 import {
   SACBootstrap5FormModule,
@@ -16,10 +19,22 @@ import {
   imports: [SACBootstrap5FormModule, SACBootstrap5InputModule, FormsModule],
 })
 export class DemoSubFormComponent implements DoCheck {
-  @Input() mymodel;
-  @Output() mymodelChange = new EventEmitter();
+  // #region Properties
+
+  @Input() public mymodel;
+  @Output() public mymodelChange = new EventEmitter();
+  @ViewChild('formaccess') public form: SacInheritFormDirective;
+
+  // #endregion Properties
 
-  ngDoCheck() {
+  // #region Public Methods
+
+  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,44 +1,17 @@
-import { Directive, SkipSelf } 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';
 
 // #region Classes
 
 /**
- * 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);
- * }
- *}
- *
+ * Directive to inherit an NgForm/NgForm from a parent component
  */
 @Directive({
   selector: '[sacInheritForm]',
+  exportAs: 'sacinheritform',
+  standalone: true,
   providers: [
     {
       provide: SacFormDirective,
@@ -51,9 +24,20 @@ import { SacFormDirective } from './form';
       deps: [NgForm],
     },
   ],
-  standalone: true,
 })
-export class SacInheritFormDirective {}
+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
 

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);
+  }
+}
+```