Ngx-Bootstrap-Form-Builder

This module will help you to make bootstrap forms and their validation easy.

Install

1. Install by running: npm install --save ngx-bootstrap-form-builder
2. Install bootstrap by running: npm install --save bootstrap
3. Add NgxBootstrapFormBuilderModule to your app.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="[email protected]" 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" |