Angular Bootstrap inputs

MDB provides several form control styles, layout options, and custom components for creating a wide variety of forms.

All of them are created in beautiful, material design style.

Input fields

Basic example 



<div class="md-form">
    <input mdbActive type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

Small input 


<div class="md-form form-sm">
    <input mdbActive type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

Icon Prefixes 


<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input mdbActive type="text" id="form2" class="form-control">
    <label for="form2">Example label</label>
</div>

Placeholder 


<div class="md-form">
    <input mdbActive placeholder="Placeholder" type="text" id="form58" class="form-control">
    <label for="form58">Example label</label>
</div>

Prefilling Text Inputs 


<div class="md-form">
    <input value="John Doe" type="text" id="form6" class="form-control" mdbActive>
    <label for="form6">Example label</label>
</div>

Error or Success Messages


There are available such fields as minLength, maxLength, data-error and data-success.

minLength, maxLength defines minimum and maximum input length. data-error, data-success provides space to enter your's custom error or success message


Validation options


You can validate inputs with types: text, email, password. Please notice, that for proper validation works, mdbInputValidate directive is obligatory.



                               
<form>
  <div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input mdbActive data-error="wrong email" data-success="valid email" minLength="8" maxLength="25" type="email" class="form-control" id="form9" name="email" mdbInputValidate>
    <label for="form9">Type your e-mail</label>
  </div>

  <div class="md-form">
    <i class="fa fa-lock prefix"></i>
    <input mdbActive data-error="wrong password" data-success="valid password" minLength="10" maxLength="25" type="password" class="form-control" id="form10" name="password" mdbInputValidate>
    <label for="form10">Type your password</label>
  </div>
</form>

Disabled input

Add the disabled boolean attribute on an input to prevent user interactions.

To use not-allowed cursor add .disabled class to the label.


<div class="md-form form-sm">
    <input type="text" id="form11" class="form-control" disabled>
    <label for="form11" class="disabled">Example label</label>
</div>

Form layouts

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Inline forms:

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:

  • Controls are display: inline-block to provide alignment control via vertical-align and margin.
  • Controls receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 768px wide to account for narrow viewports on mobile devices.

Because of this, you may need to address the width and alignment of individual form controls manually. Lastly, as shown below, you should always include a <label> with each form control.

Login 

<form class="form-inline">

    <div class="md-form form-group">
        <i class="fa fa-envelope prefix"></i>
        <input mdbActive type="email" class="form-control" id="form9" name="email" mdbInputValidate>
        <label for="form9">Type your e-mail</label>
    </div>
    <div class="md-form form-group">
        <i class="fa fa-lock prefix"></i>
        <input mdbActive type="password" class="form-control" id="form10" name="password" mdbInputValidate>
        <label for="form10">Type your password</label>
    </div>

    <div class="md-form form-group">
        <a class="btn btn-primary btn-lg waves-light" mdbRippleRadius>Login</a>
    </div>

</form>

Using the Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes (or mixins). Add the .row class to form groups and use the .col-* classes to specify the width of your labels and controls.


<form>
    <!--First row-->
    <div class="row">
        <!--First column-->
        <div class="col-md-6">
            <div class="md-form">
                <i class="fa fa-envelope prefix"></i>
                <input mdbActive type="email" class="form-control" id="form9" name="email" mdbInputValidate>
                <label for="form9">Type your e-mail</label>
            </div>
        </div>

        <!--Second column-->
        <div class="col-md-6">
            <div class="md-form">
                <i class="fa fa-lock prefix"></i>
                <input mdbActive type="password" class="form-control" id="form10" name="password" mdbInputValidate>
                <label for="form10">Type your password</label>
            </div>
        </div>
    </div>
    <!--/.First row-->

    <!--Second row-->
    <div class="row">
        <!--First column-->
        <div class="col-md-12">

            <div class="md-form">
                <textarea mdbActive type="text" id="form76" class="md-textarea"></textarea>
                <label for="form76">Basic textarea</label>
            </div>

        </div>
    </div>
    <!--/.Second row-->

    <!--Third row-->
    <div class="row">

        <!--First column-->
        <div class="col-md-4">
            <div class="md-form">
                <input mdbActive type="text" id="form41" class="form-control">
                <label for="form41" class="">Example label</label>
            </div>
        </div>

        <!--Second column-->
        <div class="col-md-4">
            <div class="md-form">
                <input mdbActive type="text" id="form51" class="form-control">
                <label for="form51" class="">Example label</label>
            </div>
        </div>

        <!--Third column-->
        <div class="col-md-4">
            <div class="md-form">
                <input mdbActive type="text" id="form61" class="form-control">
                <label for="form61" class="">Example label</label>
            </div>
        </div>

    </div>
    <!--/.Third row-->
</form>

Textarea 


<!--Basic textarea-->
<div class="md-form">
    <textarea mdbActive type="text" id="form7" class="md-textarea"></textarea>
    <label for="form7">Basic textarea</label>
</div>

<!--Textarea with icon prefix-->
<div class="md-form">
    <i class="fa fa-pencil prefix"></i>
    <textarea mdbActive type="text" id="form8" class="md-textarea"></textarea>
    <label for="form8">Icon Prefix</label>
</div>

Checkboxes MDB Pro component

Basic examples 


<div class="form-group">
    <input mdbDeepDirective type="checkbox" id="checkbox1">
    <label for="checkbox1">Classic checkbox</label>
</div>

<div class="form-group">
    <input mdbDeepDirective type="checkbox" class="filled-in" id="checkbox2">
    <label for="checkbox2">Filled-in checkbox</label>
</div>

Disabled checkboxes 


<div class="form-group">
    <input type="checkbox" id="checkbox3" disabled checked="checked">
    <label for="checkbox3" class="disabled">Classic checkbox</label>
</div>

<div class="form-group">
    <input type="checkbox" class="filled-in" id="checkbox4" disabled checked="checked">
    <label for="checkbox4" class="disabled">Filled-in checkbox</label>
</div>

Inline checkboxes 


<form class="form-inline">
    <div class="form-group">
        <input type="checkbox" id="checkbox11" checked="checked">
        <label for="checkbox11">Classic checkbox</label>
    </div>
    <div class="form-group">
        <input type="checkbox" class="filled-in" id="checkbox22" checked="checked">
        <label for="checkbox22">Filled-in checkbox</label>
    </div>
    <div class="form-group">
        <input type="checkbox" id="checkbox33" checked="checked">
        <label for="checkbox33">Classic checkbox</label>
    </div>
</form>

How to allow change checkbox / radio on focus?

In situation when user wants to change checkbox / radio elements after focus (tab in example), adding mdbDeepDirective to every input element is obligatory to proper working this feature

Radio buttons MDB Pro component

Basic examples 



<div class="form-group">
  <input mdbDeepDirective name="group1" type="radio" id="radio1">
  <label for="radio1">Option 1</label>
</div>

<div class="form-group">
  <input mdbDeepDirective name="group1" type="radio" id="radio2">
  <label for="radio2">Option 2</label>
</div>

<div class="form-group">
  <input mdbDeepDirective name="group1" type="radio" id="radio3">
  <label for="radio3">Option 3</label>
</div>

Radio buttons with gap 



<div class="form-group">
  <input name="group2" type="radio" class="with-gap" id="radio4">
  <label for="radio4">Option 1</label>
</div>

<div class="form-group">
  <input name="group2" type="radio" class="with-gap" id="radio5">
  <label for="radio5">Option 2</label>
</div>

<div class="form-group">
  <input name="group2" type="radio" class="with-gap" id="radio6">
  <label for="radio6">Option 3</label>
</div>

Inline radio buttons 



<form class="form-inline">
    <div class="form-group">
        <input name="group1" type="radio" id="radio11" checked="checked">
        <label for="radio11">Option 1</label>
    </div>

    <div class="form-group">
        <input name="group1" type="radio" id="radio21">
        <label for="radio21">Option 2</label>
    </div>

    <div class="form-group">
        <input name="group1" type="radio" id="radio31">
        <label for="radio31">Option 3</label>
    </div>
</form>

Switch MDB Pro component

Basic example:

Disabled:

<!-- Switch -->
<div class="switch">
  <label>
    Off
    <input type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>

<!-- Disabled Switch -->
<div class="switch">
  <label>
    Off
    <input disabled type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>

File input MDB Pro component

Basic example


You can check our plnkr which shows, how to proper implement File Input: https://embed.plnkr.co/plunk/mMVsbT

Add ngFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" to the .file <input> and [value]="showFiles()" to the .file-path <input>.

Choose file 


<form>
  <div class="file-field">
    <div class="btn btn-primary btn-sm waves-light" mdbRippleRadius>
      <span>Choose file</span>
      <input type="file" mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
    </div>
    <div class="file-path-wrapper">
      <input class="file-path" type="text" placeholder="Upload your file" [value]="showFiles()">
    </div>
  </div>
</form>

Data structure:


import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'your_path_to/typescripts/pro/file-input';
import { humanizeBytes } from 'your_path_to/typescripts/pro/file-input';

@Component({
  selector: 'file-input-example',
  templateUrl: 'file-input.html',

})

export class FileInputComponent  {
    formData: FormData;
    files: UploadFile[];
    uploadInput: EventEmitter<UploadInput>;
    humanizeBytes: Function;
    dragOver: boolean;

    constructor() {
        this.files = [];
        this.uploadInput = new EventEmitter<UploadInput>();
        this.humanizeBytes = humanizeBytes;
    }

    showFiles() {
        let files = "";
        for(let i = 0; i < this.files.length; i ++) {
          files += this.files[i].name
           if(!(this.files.length-1 == i)) {
             files += ", "
          }
        }
        return files;
     }

    startUpload(): void {
        const event: UploadInput = {
        type: 'uploadAll',
        url: '/upload',
        method: 'POST',
        data: { foo: 'bar' },
        concurrency: 1
        }

        this.uploadInput.emit(event);
    }

    cancelUpload(id: string): void {
        this.uploadInput.emit({ type: 'cancel', id: id });
    }

    onUploadOutput(output: UploadOutput | any): void {

        if (output.type === 'allAddedToQueue') { 
        } else if (output.type === 'addedToQueue') {
          this.files.push(output.file); // add file to array when added
        } else if (output.type === 'uploading') {
          // update current data in files array for uploading file
          const index = this.files.findIndex(file => file.id === output.file.id);
          this.files[index] = output.file;
        } else if (output.type === 'removed') {
          // remove file from array when removed
          this.files = this.files.filter((file: UploadFile) => file !== output.file);
        } else if (output.type === 'dragOver') {
          this.dragOver = true;
        } else if (output.type === 'dragOut') {
        } else if (output.type === 'drop') {
          this.dragOver = false;
        }
        this.showFiles();

    }
}

Range MDB Pro component

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. 


            <form class="range-field mt-5">
                <div class="track">
                <div #rangeCloud class="range-cloud" title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">
        
                <span class="text-transform">{{range}}</span>
                </div>
                </div>
                <input #input name="range" type="range" min="0" max="100" (focus)="visibility = true" (blur)="visibility = false"
                  [(ngModel)]="range" (change)="coverage()">
                  </form>

Data structure:


import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'range-example',
  templateUrl: 'range.html',
})

export class RangeComponent {
    @ViewChild('input') input: ElementRef;
    @ViewChild('rangeCloud') rangeCloud: ElementRef;
    range: any = 50;

    constructor(private renderer: Renderer2) { }

    coverage() {
    if (typeof this.range === "string" && this.range.length !== 0) {

      return this.range;
    }
    const maxValue = this.input.nativeElement.getAttribute('max');
    const cloudRange = (this.range / maxValue) * 100;
    this.renderer.setStyle(this.rangeCloud.nativeElement, 'left', cloudRange + '%')
  }
  
}

Character counter

Use a character counter in fields where a character restriction is in place.

Input field 



<div class="md-form">        
    <input id="input_text" type="text" length="10" mdbCharCounter mdbActive>
    <label for="input_text">Input text</label>
</div>

Textarea 



<div class="md-form">        
    <textarea class="md-textarea" id="input_text" type="text" length="120" mdbCharCounter mdbActive></textarea>
    <label for="input_text">Type your text</label>
</div>

Autocomplete MDB Pro component 


<mdb-completer [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
</mdb-completer>

Data structure:


import { Component } from '@angular/core';
import { CompleterData } from 'path-to-completerData';
import { CompleterService } from 'path-to-completerService';
            

@Component({
  selector: 'autocomplete-example',
  templateUrl: 'autocomplete.html',

})

export class AutocompleteComponent  {    
    protected searchStr: string;
    protected dataService: CompleterData;

    protected searchData = [
        { color: 'red'},
        { color: 'green'},
        { color: 'blue'},
        { color: 'cyan'},
        { color: 'magenta'},
        { color: 'yellow'},
        { color: 'black'},
    ];


    constructor(private completerService: CompleterService) {
        this.dataService = completerService.local(this.searchData, 'color', 'color');
    }
}

Options:

Attribute Description Type Required Default
datasource Autocomplete list data source can be an array of strings or a URL that results in an array of strings or a CompleterData object Array <string>|string|CompleterData Yes
dataService Deprecated use datasource instead. Autocomplete list data source. CompleterData Yes
ngModel see the angular forms API. string Yes
autofocus Set input focus when the page loads boolean No false
clearUnselected Clear the input on blur if not selected. boolean No false
clearSelected Clear the input when a result is selected. boolean No false
disableInput If true disable the input field. boolean No false
initialValue Initial value for the component. Value is parsed using: titleField, descriptionField and imageField and used as selected value any No
inputClass class attribute of the input element. string No
matchClass CSS class to apply for matching part of the title and description. string No
maxChars Maximal number of characters that the user can type in the component. number No 524288
minSearchLength Minimal number of characters required for searching. number No 3

Alternate Version 


<div class="md-form">
  <input type="text" class="input-alternate" placeholder="John Doe">
</div>