A small library that adds validation with decorators and build angular forms ๐ ฐ๐
Try out our demo on Stackblitz!
npm install ngx-forms-builder --saveYou'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 {}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, }); } }