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', '[email protected]', 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,
});
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent