@ruslanguns/ionic v0.0.0-FORMLY-VERSION

ATTENTION !!!

This is not the official repository. This one is created only for practical reasons. Do not use it or use it at your own risk.

Please use the official library from @ngx-formly

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!
• 💪 Build on top of Angular Reactive Forms
• 😱 Drag and Drop Editor (coming 🔜)

Supported UI libs

Which Version to use?

Quick links

• Documentation, demos, and guides

Quick Start

Follow these steps to get started with Ngx Formly. Also check out our demos for further examples.

1. Install @angular/forms and @ruslanguns/core packages:

  npm install @angular/forms @ruslanguns/core --save

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

  npm install @ruslanguns/<package-name> --save

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

import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ruslanguns/core';

/**
 * - Bootstrap:     import {FormlyBootstrapModule} from '@ruslanguns/bootstrap';
 * - Material2:     import {FormlyMaterialModule} from '@ruslanguns/material';
 * - Ionic:         import {FormlyIonicModule} from '@ruslanguns/ionic'
 * - PrimeNG:       import {FormlyPrimeNGModule} from '@ruslanguns/primeng';
 * - Kendo:         import {FormlyKendoModule} from '@ruslanguns/kendo';
 * - NativeScript:  import {FormlyNativescriptModule} from '@ruslanguns/nativescript';
 */
import {FormlyBootstrapModule} from '@ruslanguns/bootstrap';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    FormlyModule.forRoot(),

    /**
     * - Bootstrap:    FormlyBootstrapModule
     * - Material2:    FormlyMaterialModule
     * - Ionic:        FormlyIonicModule
     * - PrimeNG:      FormlyPrimeNGModule
     * - Kendo:        FormlyKendoModule
     * - NativeScript: FormlyNativescriptModule
     */
    FormlyBootstrapModule,
  ],
})
export class AppModule {}

4. Define the form config in your component:

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

@Component({
  selector: 'app',
  template: `
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: 'email@gmail.com' };
  fields: FormlyFieldConfig[] = [{
    key: 'email',
    type: 'input',
    templateOptions: {
      label: 'Email address',
      placeholder: 'Enter email',
      required: true,
    }
  }];

  submit(model) {
    console.log(model);
  }
}

From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.

Using with Angular-CLI

@ruslanguns/schematics provides CLI commands for setting up a project and eventually generating other features (e.g. wrapper components). Built on top of Schematics, this tool integrates with the Angular CLI.

Installation

Install @ruslanguns/schematics from npm:

npm install @ruslanguns/schematics --save-dev

Default Schematics Collection

To use @ruslanguns/schematics as the default collection in your Angular CLI project, add it to your angular.json:

ng config cli.defaultCollection @ruslanguns/schematics

The collection schema defines the available schematics to run.

The @ruslanguns/schematics extend the default @schematics/angular collection and so all existing Angular CLI commands are available. If you want to set defaults for schematics such as generating components with scss file, you must change the schematics package name from @schematics/angular to @ruslanguns/schematics in angular.json:

"schematics": {
  "@ruslanguns/schematics:component": {
    "styleext": "scss"
  }
}

Quick Start with Schematics

Install @angular/forms and @ruslanguns/core packages and choose a UI theme to install:

  ng add @ruslanguns/schematics --ui-theme=material

Roadmap

See the issues labeled enhancement

Credits

• Abdellatif Ait boudad
• Mohammed Zama Khan
• Kent C. Dodds
• All contributors!

Contributors

Thanks goes to these wonderful people (emoji key):