README
Nomad Form
Very simple form generator written with Angular 12, for Bootstrap 5.
Don't re-invent the wheel, Just re-align It
Project Principles
- A clean & beautiful interface
- Highly configurable and customizable
- Responsive web app accessible from any device on the network
What you can do ?
- Build any kind of form element components. Not just traditional inputs, but anything you want and get that validation for free
- Add validation rules and use them with simple syntax
- Use handlers for different states of your form. Ex. "onSubmit", "onError", "onValid" etc.
- Pass external errors to the form to invalidate elements
- You can dynamically add form elements to your form and they will register/unregister to the form
Installation
First you need to install the npm module:
$ npm install @ngx-nomad-form
This will install all dependencies required for use the package.
Usage
NgxNomadFormModule
:
1. Import the Finally, you can use ngx-nomad-form in your Angular project. You have to import NgxNomadFormModule.forRoot()
in the root NgModule of your application.
The forRoot
static method is a convention that provides and configures services at the same time.
Make sure you only call this method in the root module of your application, most of the time called AppModule
.
This method allows you to configure the NgxNomadFormModule
.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxNomadFormModule } from '@ngx-nomad-form';
@NgModule({
imports: [
BrowserModule,
NgxNomadFormModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
SharedModule
If you use a SharedModule
that you import in multiple other feature modules,
you can export the NgxNomadFormModule
to make sure you don't have to import it in every module.
@NgModule({
exports: [
CommonModule,
NgxNomadFormModule
]
})
export class SharedModule { }
Note: Never call a
forRoot
static method in theSharedModule
. You might end up with different instances of the service in your injector tree. But you can useforChild
if necessary.
2. Create your form
import { Component } from '@angular/core';
import { FieldConfig } from 'ngx-nomad-form';
@Component({
selector: 'app-root',
template: `
<nf-form [fields]="fields" [formConfig]="formConfig" (callBack)="callBack($event)" (onChange)="change($event)"></nf-form>
`
})
export class AppComponent {
//Form
formConfig: FormConfig = {
name: 'loginForm',
enctype: 'text/plain',
};
//My fields
fields: FieldConfig[] = [{
type: 'input',
label: 'Username',
inputType: 'text',
name: 'name',
readonly: false,
validations: [{
name: 'required',
validator: Validators.required,
message: 'Name Required'
}, {
name: 'pattern',
validator: Validators.pattern('^[a-zA-Z]+