SaeculumAngularFormly

This library was generated with Angular CLI version 8.1.3.

Code scaffolding

Run ng generate component component-name --project saeculumAngularFormly to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project saeculumAngularFormly.

Note: Don't forget to add --project saeculumAngularFormly or else it will be added to the default project in your angular.json file.

Build

Run ng build saeculumAngularFormly to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build saeculumAngularFormly, go to the dist folder cd dist/saeculum-angular-formly and run npm publish.

Running unit tests

Run ng test saeculumAngularFormly to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Getting started

Saeculum Formly is a dynamic (JSON powered) form library for Angular that bring unmatched maintainability to your application's forms.

Features

• 🔥 Automatic forms generation
• 📝 Easy to extend with custom field type, validation, wrapper and extension.
• ⚡️ Support multiple schemas:
  • Formly Schema (core)
  • JSON Schema
• 😍 A bunch of themes, out of the box!

1. Install @angular/forms and @ngx-formly/core packages:

  npm install @angular/forms saeculum-angular-formly --save

2. Choose and install your UI (pre-defined types/templates) package:

3. Import the SaeculumAngularFormlyModule and UI (pre-defined types/templates):

import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {SaeculumAngularFormlyModule} from '@ngx-formly/core';


@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    SaeculumAngularFormlyModule,
  ],
})
export class AppModule {}

File input and image input demo row:

Field = {
          key: 'excel',
          type: 'uploader',
          templateOptions: {
              type: 'file', // 'image'
              label: 'Google Excel Report',
              placeholder: '',
              description: '',
              tooltip: '',
              addOnRight: {
                  show: false,
                  icon: 'fas fa-car',
                  click: () => { }
              },
              addOnLeft: {
                  show: false,
                  icon: 'fas fa-car',
                  click: () => { }
              },
              disabled: false,
              multiple: false,  // select
              bindValue: 'id',  // select
              bindLabel: 'name',  // select
          },
          validators: {
              allowedExtensions: '.pdf', // .xls...more
              required: true,
              pattern: ''
          },
          errorMessages: {
              required: 'File is required.',
          },
          className: {
              main: 'col-6',
              label: 'text-primary',
              input: 'col-md-12'
          },
        
      }

import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {SaeculumAngularFormlyModule} from '@ngx-formly/core';


@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    SaeculumAngularFormlyModule,
  ],
})
export class AppModule {}

4. Define the form config in your component:

import {Component} from '@angular/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'app',
  template: `
   <form class="saeculum-form" novalidate [formGroup]="form" autocomplete="off">

      <saeculum-formly [form]="form" [fieldList]="fieldList" [options]="options" [values]="values"
        (valueChange)="onValueChange($event)">
      </saeculum-formly>
      
      <div class="pt-2 col-md-12">
        <button type="button" [disabled]="!form.valid" class="btn btn-primary" (click)="submitForm()" value="Save">Save</button>
      </div>

  </form>
  `,
})
export class AppComponent {
  form = new FormGroup({});
  fieldList: any = [{
        row: 1,
        fields: [
          {
                key: 'country',
                type: 'typeahead',
                templateOptions: {
                    label: 'Country',
                    placeholder: 'Enter Name',
                    description: '',
                    tooltip: '',
                    addOnRight: {
                        show: true,
                        icon: 'fas fa-car',
                        click: () => { }
                    },
                    addOnLeft: {
                        show: true,
                        icon: 'fas fa-car',
                        click: () => { }
                    },
                    url: 'http://dummy.restapiexample.com/api/v1/employees', // typeahead
                    typeaheadServerSide: true, // typeahead NOTE : options needed when typeaheadServerSide false
                    disabled: false,
                    bindLabel: 'name',  // select // typeahead
              },
              validators: {
                   required: true,
                },
                errorMessages: {
                    required: 'Name is required.',
                },
                className: {
                    main: 'col-12',
                    label: 'text-primary',
                    input: 'text-primary'
                },
                options: [{ key: 'test1', label: 'radio one' }, { key: 'test2', label: 'radio two' }], // Radio button.
           },
            {
                key: 'admin',
                type: 'text', // select, textarea, separator,number,password, time, date, email, radio, checkbox, uploader, typeahead
                templateOptions: {
                    label: 'Name',
                    secondaryLabel : 'abc', // Only for checkbox
                    placeholder: 'Enter Name',
                    description: '',
                    tooltip: '',
                    addOnRight: {
                        show: true,
                        icon: 'fas fa-car',
                        click: () => { }
                    },
                    addOnLeft: {
                        show: true,
                        icon: 'fas fa-car',
                        click: () => { }
                    },
                    url: 'http://dummy.restapiexample.com/api/v1/employees', // typeahead
                    typeaheadServerSide: true, // typeahead
                    disabled: false,
                    maxSelectedItems : 4, // select
                    hideSearchInput : false, // select
                    hideSelectUnselect : false, // select
                    multiple: false,  // select
                    bindValue: 'id',  // select
                    bindLabel: 'name',  // select // typeahead
                },
                validators: {
                   required: true,
                    min_length: 3,
                    max_length: 20,
                    min: 1995,
                    max: 2019,
                    pattern: ''
                },
                errorMessages: {
                    required: 'Name is required.',
                    minlength: 'Minimum required name is 3.',
                    maxlength: 'Maximum name can be 20.',
                    min: 'Year should be in range 1995 to 2019.',
                    max: 'Year should be in range 1995 to 2019.',
                    pattern: 'Please enter valid format.',
                },
                className: {
                    main: 'col-6',
                    label: 'text-primary',
                    input: 'text-primary'
                },
                options: [{ key: 'test1', label: 'radio one' }, { key: 'test2', label: 'radio two' }], // Radio button.
            }
        ]
    }];

    // Dropdown options list.
  options: any = {
     dropdownKey: of([{ id: 'group1', name: 'Group-1' }, { id: 'group2', name: 'Group-2' }]),
  };


  
   // Patch form value. 
  values: any = {}; // NOTE : For multiselect need to pass value in array format.

  /** Form submit event.
   * @param value - object of form value.
   * @description - output emitter.
   */
   submitForm(value) {
    console.log('FORM-SUBMIT : ',value, this.form.getRawValue());
  }

  /** Notify form fields value change.
   * @param value - single form fields change value.
   * @description - output emitter.
   */
  onValueChange(change) {
    if (change.key === 'FormReady') {
      this.form = change.value;
      console.log('FORM-READY : ', this.form.getRawValue());
    }
  }
}