@anand-kashyap/ng-rxform v1.0.1

Ng-rxform

Dynamic Reactive forms for Angular 6+. Easy to use, dev friendly and noob proof.

Features

• Bootstrap 4 design form
• Predefined templates - Login and Register (NEW)
• Customisation while using a template (NEW)
• Choice of themes - light and dark
• All types of validations on field including regex along with validation messages

Note: Users are encouraged to report any issues and features that they need. For reporting any issues/suggestions, click here

Quick Usage

1. Make sure you have installed ngx-bootstrap in your project. If not, open terminal at root of your project and run ng add ngx-bootstrap. After this re-run ng serve.
2. Install this package - npm i @anand-kashyap/ng-rxform.
3. Go to app.module.ts and add this code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//
import { NgRxformModule } from '@anand-kashyap/ng-rxform';

@NgModule({
  imports: [
    BrowserModule,
    NgRxformModule
  ],
  //
})
export class AppModule { }

4. Then use the package in any of your component as follows - component.html

<rx-form  [config]="config" (out)="formSubmit($event)"></rx-form>

component.ts

import { Component } from '@angular/core';
import { Config } from '@anand-kashyap/ng-rxform';

@Component({
//
})
export class AppComponent {
  config: Config = {name: 'Login'}; // title of form

  formSubmit(vals) {
    console.log('form submit called', vals);
  }
}

5. It will render a basic login form. If you need to customise look at Options section below.

Options

Attributes

Events

Examples

fields

component.ts

import { FormField, Validator, FieldTypes } from '@anand-kashyap/ng-rxform';

export class AppComponent {

fields: FormField[] = [
    new FormField('email', [Validator.email, Validator.minlength(9)], 'E-mail'),
    new FormField('agreement', [Validator.required, Validator.number], 'Agreement Number'),
  ];

}
  formSubmit(values) {
    console.log(values);  
  }

component.html

<rx-form [fields]="fields" (out)="formSubmit($event)"></rx-form>

template

component.ts

import { Component } from '@angular/core';
import { Template } from '@anand-kashyap/ng-rxform';

@Component({
//
})
export class AppComponent {
  template = Template.Register;

  formSubmit(vals) {
    console.log('form submit called', vals);
  }
}

component.html

<rx-form [template]="template" (out)="formSubmit($event)"></rx-form> 

theme

component.ts

import { Component } from '@angular/core';
import { Theme } from '@anand-kashyap/ng-rxform';

@Component({
//
})
export class AppComponent {
  theme = Theme.dark; // or Theme.light

  formSubmit(vals) {
    console.log('form submit called', vals);
  }
}

component.html

<rx-form [theme]="theme" (out)="formSubmit($event)"></rx-form> <!--set to dark theme--> 

Classes/API

Coming soon

Both Documentation and Package will receive regular updates with improvements/additions. If any issues/suggestions, click here