ng2-form-utils


$3

Large forms with more then 10 fields are tedious to code out. ng2-form-utils offers functions to do the heavy lifting of creating the Angular2 Controls.

* Installation
* Usage
* API

Installation

First you need to install the npm module:
``sh
npm install ng2-form-utils --save
`

Usage

Create object(s) that captures your form fields and feed it to FormObjectBuilder. Then in your template you define the ngControls with the name of the corresponding properties of the object.
FormObjectBuilder is able to deal with nested objects. It takes the property name of the nested object as prefix.
See example below.

$3


Let's say you need to have a person's details and address.
`html

firstname:
lastname:
birthDate:
street:
city:
country:

`

When you have these Objects,

Person.ts
`typescript
import { Address } from './address';

export class Person{

firstName: string;
lastName: string
birthDate: Date;
address: Address
}
`

Address.ts
`typescript
export class Address {

street: string;
city: string;
country: string;
}
`

Now you only have to instantiate FormObjectBuilder with the object

`typescript

@Component(
{
selector: 'personForm',

template: require('./personForm.html')
}
)

export class PersonForm {


fob: FormObjectBuilder;


constructor() {

this.fob = new FormObjectBuilder(new Person());
...
`

FormObjectBuilder will create for every property in the given Object a Control and one ControlGroup where the controls will have been add.
It has some functions to retrieve the ControlGroup and Controls.

API

FormObjectBuilder has the following methods:

- getFormObject - Retrieves given Object updated with last values from the form.

- getControlGroup - Gives the ControlGroup

- getControl(propertyName: string) - Gives the Control for a particular property of the object.

- dirtyControls - Make all Controls` dirty.

- getInvalidControls - Retrieve all invalid controls.