Angular Easy Form

*warning - this version is release, not use it in production

Permit create forms in Angular easier and fast.

Get Started

$3

npm install angular-easy-form

Usage

``ts

// add import AngularEasyFormModule

import { AngularEasyFormModule } from 'angular-easy-form';

@NgModule({

declarations: [

AppComponent,

],

imports: [

CommonModule,

BrowserModule,

ReactiveFormsModule,

BrowserAnimationsModule,

AngularEasyFormModule,

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }


`

In your component's template file "app.component.html" you have add tag lib-angular-easy-form

`html

(eventsForm)="eventForm($event)">


`

The configForm is passed all configuration form. You should create a method to get events of form.
`ts

eventForm(event: any) {

// get events(events:any)

}

`

| Parameter | Description | Type | Example |
| ------------------- | ------------------- | ------------------- | ------------------- |
| style | Style of main form | string | { style: 'background-color: red;' } |
| fields | Fields define the fields and parameters | array | see above complete example |
| type | Type of the field | string | text, email, date, number, checkbox , textarea, searchInput |
| alias | Unique identificator of the field | string | --- |
| label | Label of field | string | If not exist lable only show input field |
| disable | Disable of input | boolean | if true the input became disabled |
| placeholder | Show text in imput | string | only util when input permit placeholder |
| value | Set default value in field | string | ---- |
| required | Set if the field is requided | boolean | buy default is false|
| maxLength | Set size of field | number | maxLength: 5 |
| miniLength | Set size of field | number | miniLength: 5 |
| pattern | Set regex in field | any | pattern:'[a-zA-Z ]*' |

### Example of configForm

* Type and alias are mandatory

`typescript
import { options } from 'angular-easy-form';

export class YourComponent implements OnInit, AfterViewInit {
ngOnInit() {
const formCreator = options.formOptions();
formCreator.matriz = [2];

formCreator.field().text({
type: 'text', alias: 'f1', label: 'Teste 1', disable: false, placeholder: 'oi',
value: '', style: '', required: true
});
formCreator.field().text({
type: 'text', alias: 'f2', label: 'Teste 2', disable: false, placeholder: 'oi',
value: '', style: '', required: true
});
this.setConfig = formCreator.build();
}
`

The form automatically rendering

!alt tag

$3

The event object return ken with alias of field and value. Contain to if the field is valid and formGroup instance


`javascript
f1: {
formGroup: FormGroup,
isValid: true,
value: {f1: "yourValue"}

}

`

Compatible with Angular Ivy

has not been processed correctly by ngcc, or is not compatible with Angular Ivy


Resolve this:

`json
package.json
content_copy
{
"scripts": {
"postinstall": "ngcc"
}
}

`

`node

npm run postinstall


``

$3

This project is licensed under the terms of the MIT license.