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)" | email and password fields
| 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