1.0.1 • Published 3 years ago

@anand-kashyap/ng-rxform v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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 { }
  1. 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);
  }
}
  1. It will render a basic login form. If you need to customise look at Options section below.

Options

Attributes

NameDescriptionValuesDefault
fieldsAdd custom fields in form[new FormField('fieldName')]email and password fields
templateUse predefined form templatesTemplate TypeLogin Template
themeAllows switching to available themesTheme.light, Theme.darkTheme.light
errorDisplay a custom error inside formAny string type''
configSet name of submit button label and form title{name: string, submitLabel: string}: Config{name: 'Login', submitLabel: 'Login'}
otherButtonOptional button beside submit button - name of label.Any string type'Register'
linkOptional link at bottom right of form{type: string, label: string, url: string}: Link{type: 'link', label: 'Forgot Password?', url: '/forgot'}

Events

NameDescriptionReturn parametersSyntax
outEvent generated on submitting formReturns all form field values(out)="methodName($event)"email and password fields
btnClickEvent generated on clicking other buttonReturns complete formgroupbtnClick="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