https://github.com/raymondcoplin/ngx-forms-builder

A small library that adds validation with decorators and build angular forms. 🅰📝
https://github.com/raymondcoplin/ngx-forms-builder

angular-forms angular-validation angular-validators angular7 builder form-builder forms typescript validator validators

Last synced: 6 months ago
JSON representation

A small library that adds validation with decorators and build angular forms. 🅰📝

• Host: GitHub
• URL: https://github.com/raymondcoplin/ngx-forms-builder
• Owner: RaymondCoplin
• Created: 2018-12-14T18:28:32.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:38:15.000Z (almost 3 years ago)
• Last Synced: 2024-04-24T13:44:30.196Z (over 1 year ago)
• Topics: angular-forms, angular-validation, angular-validators, angular7, builder, form-builder, forms, typescript, validator, validators
• Language: TypeScript
• Homepage: https://ngx-forms-builder-example.stackblitz.io/
• Size: 7.61 MB
• Stars: 15
• Watchers: 2
• Forks: 3
• Open Issues: 31
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NGX Forms Builder

[![devDependencies Status](https://david-dm.org/raymondcoplin/ngx-forms-builder/dev-status.svg)](https://david-dm.org/raymondcoplin/ngx-forms-builder?type=dev) [![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-forms-builder-example)      [![NPM](https://nodei.co/npm/ngx-forms-builder.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/ngx-forms-builder)

[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-forms-builder.svg)](https://bundlephobia.com/result?p=ngx-forms-builder) [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)

A small library that adds validation with decorators and build angular forms 🅰📝

## Demo

Try out our [demo on Stackblitz](https://ngx-forms-builder-example.stackblitz.io)!

## Install

```bash

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.

```typescript

@NgModule({

  declarations: [

    YourAppComponent

  ],

  imports: [

    NgxFormsBuilderModule.forRoot(),

    ...

  ],

  providers: [],

  bootstrap: [YourAppComponent]

})

export class YourAppComponent {}

```

## Usage

```typescript

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, 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,

    });

  }

}

```