@fzznk/form-tools NPM

FormTools

0. Building and Publishing

ng build form-tools
from inside dist/form-tools run npm publish

1. FormBaseComponent

1.1. Purpose

Use this Component as a base for Components that use Reactive Forms to automate the update of form values on data changes and vice versa.

1.2. Installation

npm install @fzznk/form-tools

import {FormTools} from '@fzznk/form-tools'

1.3. Usage

Create your component that contains the reactive form in form: FormGroup, extending FormBaseComponent:

export class MyFormComponent extends FormBaseComponent

Don´t forget to call super() in your constructor.

Pass data to the Component as [dataObject] and make sure that all form controls are named identically as the object properties they should correspond to.

Include <button>-Tags with (click)="save()" and (click)="create()" and (click)="delete()" to trigger events and process them in the parent component as follows:

(createObj)="create($event)", (patchObj)="update($event)" and (deleteObj)="delete($event)"

You can also use (click)="saveOrCreate()" which decides bases on wheter a positive id of the object exists if the save- or the create-signal should be emitted.

Or, alternatively, implement your own save(), create() and delete() methods in your specific component, making sure to call super.save(), super.create() and super.delete() as the first statement in your methods to ensure the object is updated before being processed.

Lastly, by setting [debug]="true" all form and dataObject updates are logged to console.

2. SetFocusDirective

import FormsToolModule and add libSetFocus to element in order to focus it on load.

3. EnumToArrayPipe

use to loop over enum key/value pairs to create select options for input forms i.e. as <option *ngFor="let o of CO | enumToArray" [value]="o.index">{{o.name}}</option>