Skip to content

A small library that adds validation with decorators and build angular forms. πŸ…°πŸ“

Notifications You must be signed in to change notification settings

RaymondCoplin/ngx-forms-builder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

afad54f Β· Oct 21, 2019

History

10 Commits
Apr 12, 2019
Oct 21, 2019
Apr 23, 2019
Apr 12, 2019
Apr 12, 2019
Aug 28, 2019
Apr 12, 2019
Apr 12, 2019
Aug 15, 2019
Apr 12, 2019
Apr 12, 2019
Aug 15, 2019

Repository files navigation

NGX Forms Builder

devDependencies Status npm      NPM

npm bundle size (minified + gzip) npm

A small library that adds validation with decorators and build angular forms πŸ…°πŸ“

Demo

Try out our demo on Stackblitz!

Install

npm install ngx-forms-builder --save

Setup

You'll need to add NgxFormsBuilderModule to your application module. So that, the builder service will be accessible in your application.

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    NgxFormsBuilderModule.forRoot(),
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

Usage

import { Required, Email, Pattern, Min, Max, CustomValidator } from 'ngx-forms-builder';

export class Person {

  @Required()
  firstName: string;

  @Required()
  lastName: string;

  @Email()
  @Required()
  email: string;

  @Pattern(/^[.,_A-zΓ€-ΓΊ0-9]*((-|\s)*[.,_A-zΓ€-ΓΊ0-9])*$/)
  address: string;

  @Min(1)
  @Max(100)
  age: number;

  @Exclude()
  secretPassword: string;

  @CustomValidator(identificationValidator)
  documentNumber: string;

  constructor(firstName: string, lastName: string, email: string, age: number, address: string, secretPassword: string) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
    this.age = age;
    this.address = address;
    this.secretPassword = secretPassword;
  }

}

/*-------------------------------------------------------------*/

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ModelFormBuilder } from 'ngx-forms-builder';
import { Person } from './person';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  formGroup: FormGroup;

  constructor(private fb: ModelFormBuilder<Person>, private snackBar: MatSnackBar) { }

  ngOnInit() {
    const model = new Person('Raymond', 'Coplin', 'raymondcoplin@gmail.com', 23, 'Wall Street, New York', '');
    this.formGroup = this.fb.build(model);
  }

  onSubmit() {
    this.snackBar.open(`${this.formGroup.get('firstName').value} ${this.formGroup.get('lastName').value}`, 'Saved', {
      duration: 2000,
    });
  }
}