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

Permit create forms in Angular easier and fast.

Get Started

NPM

npm install angular-easy-form

Usage

  

// 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

<lib-angular-easy-form
(eventsForm)="eventForm($event)">
</lib-angular-easy-form>

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

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

   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

Events

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

    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:

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

  npm run postinstall

License

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