1.5.1 • Published 7 months ago
ngx-bootstrap-form-builder v1.5.1
Ngx-Bootstrap-Form-Builder
This module will help you to make bootstrap forms and their validation easy.
Install
- Install by running:
npm install --save ngx-bootstrap-form-builder
- Install bootstrap by running:
npm install --save bootstrap
- Add
NgxBootstrapFormBuilderModule
to yourapp.module.ts
imports:
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgxBootstrapFormBuilderModule } from 'ngx-bootstrap-form-builder';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
NgxBootstrapFormBuilderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Usage
This module has its own fields to help you to create poweful forms with validation easy.
app.component.html
<div class="container mt-2">
<h2>Demo</h2>
<hr>
<form [formGroup]="frmGroup" (validSubmit)="formSubmit($event)">
<div class="row">
<div class="col-sm-12 col-md-6">
<bs-text-field label="Name" placeholder="Your name goes here" formControlName="name"></bs-text-field>
</div>
<div class="col-sm-12 col-md-6">
<bs-text-field label="Last name" placeholder="optional" formControlName="lastName"></bs-text-field>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<bs-text-field label="Email" placeholder="my_account@gmail.com" formControlName="email"></bs-text-field>
</div>
<div class="col-sm-12 col-md-6">
<bs-drop-down-field label="Gender" [items]="genders" keyValue="id" textValue="label" formControlName="gender">
</bs-drop-down-field>
</div>
</div>
<button type="submit" class="btn btn-primary">
Send
</button>
</form>
</div>
app.component.ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public frmGroup: FormGroup;
public genders: any[];
constructor() {
this.frmGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
lastName: new FormControl(''),
email: new FormControl('', [Validators.required]),
gender: new FormControl('', [Validators.required])
});
this.genders = [{ id: 'M', label: 'Male' }, { id: 'F', label: 'Famale' }];
}
public formSubmit(data: any): void {
console.log(data);
}
}
Available fields
Text Field: <bs-text-field></bs-text-field>
Atribute | Data type | Description |
---|---|---|
id | string | Id assigned to html control. If it is not provided a random will assigned. |
name | string | Name assigned to html control. If it is not provided a random will assigned. |
label | string | This atribute will assign a bootstrap label for the field. If it is not provided html label will not exists. |
placeholder | string | Placeholder assigned to html control. |
disabled | boolean | Enable / Disable field. Default: "false" |
showErrorDescription | boolean | Show / Hide error message when the field is invalid. Default: "true" |
faIcon | string | Adds an icon to the field. This attribute requires Font Awesome installed in your project. Default: "" |
textIcon | string | Adds a character as an icon to the field. Default: "" |
value | string | Value assigned to the field. Default: "" |
class | string | Custom CSS classes to be assigned to field container. Default: "mb-2" |