Angular Bootstrap inputs
Angular Inputs - Bootstrap 4 & Material Design
Angular Bootstrap inputs are a special fields which are used in order to receive data from the user. Used mostly in a variety of web-based forms.
All of them are created in beautiful, material design style.
MDB Angular supports the following types of inputs: button, checkbox, email, file, hidden, number, password, radio, range, reset, search, submit, tel, text, textarea.
Examples
Input field
<div class="md-form">
<input mdbInputDirective type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
Two-way data binding
Look at me:
<div class="md-form">
<input mdbInputDirective type="text" name="text" [(ngModel)]="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
<p>Look at me! {{text}}</p>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'two-way-component',
templateUrl: './two-way.component.html',
styleUrls: ['./two-way.component.scss']
})
export class TwoWayComponent {
text: string;
}
Small input
<div class="md-form form-sm">
<input mdbInputDirective type="text" id="form1" class="form-control form-control-sm">
<label for="form1" class="">Example label</label>
</div>
Icon Prefixes
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbInputDirective type="text" id="form2" class="form-control">
<label for="form2">Example label</label>
</div>
Placeholder
<div class="md-form">
<input mdbInputDirective 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" mdbInputDirective>
<label for="form6">Example label</label>
</div>
Error or Success Messages
minLength, maxLength defines minimum and maximum input length.
data-error, data-success provides space to enter your's custom error or success message.
Use can now use [errorMessage] and [successMessage] inputs to add custom messages as
strings or to pass variables defined in your typescript file. Those inputs will only work when data-error
and data-success attributes are not available.
If you do not want to use the validation, use [mdbValidate]="false" on the input
element, which should not display the validation status. Use [validateSuccess]="false" or [validateError]="false"
to disable only one type of message.
<form [formGroup]="validationForm">
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbInputDirective data-error="wrong email" data-success="valid email" formControlName="emailFormEx" minLength="8"
maxLength="25" type="email" class="form-control" id="form9">
<label for="form9">Type your e-mail</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input mdbInputDirective data-error="wrong password" data-success="valid password" formControlName="passwordFormEx"
minLength="10" maxLength="25" type="password" class="form-control" id="form10">
<label for="form10">Type your password</label>
</div>
<div class="md-form">
<input mdbInputDirective data-error="wrong password" [mdbValidate]="false" formControlName="noValidation"
data-success="valid password" type="text" class="form-control" id="form11">
<label for="form11">Turn off validation</label>
</div>
<div class="md-form">
<input mdbInputDirective data-error="wrong password" [validateSuccess]="false" formControlName="noSuccessValidation"
data-success="valid password" type="text" class="form-control" id="form12">
<label for="form12">Turn off success validation</label>
</div>
<div class="md-form">
<input mdbInputDirective data-error="wrong password" [validateError]="false" formControlName="noErrorValidation"
data-success="valid password" type="text" class="form-control" id="form13">
<label for="form13">Turn off error validation</label>
</div>
<div class="md-form">
<input mdbInputDirective [errorMessage]="errorMessage" [successMessage]="'Custom success message'" formControlName="customMessages"
type="text" class="form-control" id="form14">
<label for="form14">Custom validation messages</label>
</div>
</form>
import { FormControl, Validators } from '@angular/forms';
import { Component } from '@angular/core';
@Component({
selector: 'error-success-message',
templateUrl: './error-success-message.component.html',
styleUrls: ['./error-success-message.component.scss'],
})
export class ErrorSuccessMessageComponent {
validationForm: FormGroup;
successMessage = 'Custom success message';
errorMessage = 'Custom error message';
constructor(private fb: FormBuilder) {
this.validationForm = fb.group({
emailFormEx: [null, [Validators.required, Validators.email]],
passwordFormEx: [null, Validators.required],
noValidation: [null, Validators.required],
noSuccessValidation: [null, Validators.required],
noErrorValidation: [null, Validators.required],
customMessages: [null, Validators.required]
});
}
}
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.
Form groups
The
.form-group class is the easiest way to add some structure to forms. It provides a flexible class that
encourages proper
grouping of labels, controls, optional help text, and form validation messaging. By default it only applies
margin-bottom, but it picks up additional styles in
.form-inline as needed. Use it with
<fieldset>s,
<div>s, or nearly any other element.
<!-- Material form group -->
<form>
<!-- Material input -->
<div class="md-form form-group mt-5">
<input mdbInputDirective type="text" class="form-control" id="formGroupExampleInputMD" placeholder="Example input">
<label for="formGroupExampleInputMD">Example label</label>
</div>
<!-- Material input -->
<div class="md-form form-group mt-5">
<input mdbInputDirective type="text" class="form-control" id="formGroupExampleInput2MD" placeholder="Another input">
<label for="formGroupExampleInput2MD">Another label</label>
</div>
</form>
<!-- Material form group -->
Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<!-- Material form grid -->
<form>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input mdbInputDirective type="text" class="form-control" placeholder="First name">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input mdbInputDirective type="text" class="form-control" placeholder="Last name">
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material form grid -->
Form row
You may also swap
.row for
.form-row, a variation of our standard grid row that overrides the default column gutters for tighter
and more compact
layouts.
<!-- Material form row -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="First name">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material form row -->
<!-- Default form row -->
<form>
<!-- Grd row -->
<div class="form-row">
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInputDirective type="text" class="form-control" placeholder="First name">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInputDirective type="text" class="form-control" placeholder="Last name">
</div>
<!-- Grid column -->
</div>
<!-- Grd row -->
</form>
<!-- Default form row -->
More complex layouts can also be created with the grid system.
<!-- Extended material form grid -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInputDirective type="email" class="form-control" id="inputEmail4MD" placeholder="Email">
<label for="inputEmail4MD">Email</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInputDirective type="password" class="form-control" id="inputPassword4MD" placeholder="Password">
<label for="inputPassword4MD">Password</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInputDirective type="text" class="form-control" id="inputAddressMD" placeholder="1234 Main St">
<label for="inputAddressMD">Address</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-12">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInputDirective type="text" class="form-control" id="inputAddress2MD" placeholder="Apartment, studio, or floor">
<label for="inputAddress2MD">Address 2</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInputDirective type="text" class="form-control" id="inputCityMD" placeholder="New York City">
<label for="inputCityMD">City</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInputDirective type="text" class="form-control" id="inputZipMD" placeholder="11206-1117">
<label for="inputZipMD">Zip</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<button type="submit" class="btn btn-primary btn-md">Sign in</button>
</form>
<!-- Extended material form grid -->
<!-- Extended default form grid -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInputDirective type="email" class="form-control" id="inputEmail4" placeholder="Email">
<label for="inputEmail4">Email</label>
</div>
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInputDirective type="password" class="form-control" id="inputPassword4" placeholder="Password">
<label for="inputPassword4">Password</label>
</div>
</div>
<!-- Grid row -->
<!-- Default input -->
<div class="form-group">
<input mdbInputDirective type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
<label for="inputAddress">Address</label>
</div>
<!-- Default input -->
<div class="form-group">
<input mdbInputDirective type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
<label for="inputAddress2">Address 2</label>
</div>
<!-- Grid row -->
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInputDirective type="text" class="form-control" id="inputCity" placeholder="New York City">
<label for="inputCity">City</label>
</div>
<!-- Default input -->
<div class="form-group col-md-6">
<input mdbInputDirective type="text" class="form-control" id="inputZip" placeholder="11206-1117">
<label for="inputZip">Zip</label>
</div>
</div>
<!-- Grid row -->
<button type="submit" class="btn btn-primary btn-md">Sign in</button>
</form>
<!-- Extended default form grid -->
Horizontal form
Create horizontal forms with the grid by adding the
.row class to form groups and using the
.col-*-* classes to specify the width of your labels and controls. Be sure to add
.col-form-label to your
<label>s as well so they’re vertically centered with their associated form controls.
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For
example,
we’ve removed the
padding-top on our stacked radio inputs label to better align the text baseline.
<!-- Horizontal material form -->
<form>
<!-- Grid row -->
<div class="form-group row">
<!-- Material input -->
<label for="inputEmail3MD" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<input mdbInputDirective type="email" class="form-control" id="inputEmail3MD" placeholder="Email">
</div>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<!-- Material input -->
<label for="inputPassword3MD" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<div class="md-form mt-0">
<input mdbInputDirective type="password" class="form-control" id="inputPassword3MD" placeholder="Password">
</div>
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-md">Sign in</button>
</div>
</div>
<!-- Grid row -->
</form>
<!-- Horizontal material form -->
<!-- Default horizontal form -->
<form>
<!-- Grid row -->
<div class="form-group row">
<!-- Default input -->
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input mdbInputDirective type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<!-- Default input -->
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input mdbInputDirective type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-md">Sign in</button>
</div>
</div>
<!-- Grid row -->
</form>
<!-- Default horizontal form -->
Column sizing
As shown in the previous examples, our grid system allows you to place any number of
.cols within a
.row or
.form-row. They’ll split the available width equally between them. You may also pick a subset of your
columns to take
up more or less space, while the remaining
.cols equally split the rest, with specific column classes like
.col-7.
<!-- Material column sizing form -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-7">
<!-- Material input -->
<div class="md-form">
<input mdbInputDirective type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input mdbInputDirective type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input mdbInputDirective type="text" class="form-control" placeholder="Zip">
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material column sizing form -->
<!-- Default column sizing form -->
<form>
<!-- Grid row -->
<div class="form-row">
<!-- Grid column -->
<div class="col-7">
<!-- Default input -->
<input mdbInputDirective type="text" class="form-control" placeholder="City">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInputDirective type="text" class="form-control" placeholder="State">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Default input -->
<input mdbInputDirective type="text" class="form-control" placeholder="Zip">
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Default column sizing form -->
Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes
.col to
.col-auto so that your columns only take up as much space as needed. Put another way, the column sizes
itself based on
the contents.
<!-- Material auto-sizing form -->
<form>
<!-- Grid row -->
<div class="form-row align-items-center">
<!-- Grid column -->
<div class="col-auto">
<!-- Material input -->
<div class="md-form">
<input mdbInputDirective type="text" class="form-control mb-2" id="inlineFormInputMD" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputMD">Name</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<!-- Material input -->
<label class="sr-only" for="inlineFormInputGroupMD">Username</label>
<div class="md-form input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text md-addon">@</span>
</div>
<input mdbInputDirective type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupMD" placeholder="Username">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-0">Submit</button>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<!-- Material auto-sizing form -->
<!-- Default auto-sizing form -->
<form>
<!-- Grid row -->
<div class="form-row align-items-center">
<!-- Grid column -->
<div class="col-auto">
<!-- Default input -->
<label class="sr-only" for="inlineFormInput">Name</label>
<input mdbInputDirective type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input mdbInputDirective type="text" class="form-control py-0" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-auto">
<button type="submit" class="btn btn-primary btn-md mt-0">Submit</button>
</div>
</div>
<!-- Grid row -->
</form>
<!-- Default auto-sizing form -->
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 vary slightly from their default states.
- Controls are
display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities. - Controls and input groups receive
width: autoto override the Bootstrap defaultwidth: 100%. - Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with
spacing utilities (as shown below). Lastly, be
sure to always include a
<label> with each form control, even if you need to hide it from non-screenreader visitors with
.sr-only.
<!-- Material inline form -->
<form class="form-inline">
<!-- Material input -->
<div class="md-form">
<input mdbInputDirective type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2MD" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputName2MD">Name</label>
</div>
<!-- Material input -->
<label class="sr-only" for="inlineFormInputGroupUsername2MD">Username</label>
<div class="md-form input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text md-addon">@</span>
</div>
<input mdbInputDirective type="text" class="form-control pl-0 rounded-0" id="inlineFormInputGroupUsername2MD" placeholder="Username">
</div>
<!-- Checkbox -->
<div class="form-check mb-2 mr-sm-2">
<input mdbInputDirective class="form-check-input" type="checkbox" id="inlineFormCheckMD">
<label class="form-check-label" for="inlineFormCheckMD">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-0">Submit</button>
</form>
<!-- Material inline form -->
<!-- Default inline form -->
<form class="form-inline">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input mdbInputDirective type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<!-- Default input -->
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input mdbInputDirective type="text" class="form-control py-0" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<!-- Checkbox -->
<div class="form-check mb-2 mr-sm-2">
<input mdbInputDirective class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary btn-md mt-0">Submit</button>
</form>
<!-- Default inline form -->
Numeric input
Press the Shift key and then the Arrow Up / Arrow Down key to change the input value by + 10 / - 10.
Press the Alt key and then the Arrow Up / Arrow Down key to change the input value by + 0.1 / - 0.1.
Above functionality is possible by adding the mdbInputDirective to the input element.
<div class="md-form">
<input type="number" class="form-control" id="numberInputEx" mdbInputDirective>
<label for="numberInputEx">Number input</label>
</div>
Character counter MDB Pro component
Use a character counter in fields where a character restriction is in place.
Input field
<div class="md-form">
<input id="input_text" class="form-control" type="text" length="10" mdbCharCounter mdbInputDirective>
<label for="input_text">Input text</label>
</div>
Textarea
<div class="md-form">
<textarea class="md-textarea form-control " rows="3" id="input_text" type="text" length="120" mdbCharCounter mdbInputDirective></textarea>
<label for="input_text">Type your text</label>
</div>
Angular Inputs - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of inputs components.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Inputs:
// MDB Angular Pro
import { InputsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'// For Char Counter
import { CharCounterModule } from 'ng-uikit-pro-standard'// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'