@anand-kashyap/ng-rxform

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

Name	Description	Values	Default
fields	Add custom fields in form	[new FormField('fieldName')]	email and password fields
template	Use predefined form templates	Template Type	Login Template
theme	Allows switching to available themes	Theme.light, Theme.dark	Theme.light
error	Display a custom error inside form	Any string type	''
config	Set name of submit button label and form title	{name: string, submitLabel: string}: Config	{name: 'Login', submitLabel: 'Login'}
otherButton	Optional button beside submit button - name of label.	Any string type	'Register'
link	Optional link at bottom right of form	{type: string, label: string, url: string}: Link	{type: 'link', label: 'Forgot Password?', url: '/forgot'}

Events

Name	Description	Return parameters	Syntax
out	Event generated on submitting form	Returns all form field values	(out)="methodName($event)"
btnClick	Event generated on clicking other button	Returns complete formgroup	btnClick="methodName($event)"

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