Input fields
Angular Bootstrap 5 Input fields
Input fields refer specifically to the text input fields, which are used to obtain data from the users.
Basic example
A basic example of the input field consists of the input element with specified
ID and label element connected via this ID with the
input.
<mdb-form-control>
<input mdbInput type="text" id="form1" class="form-control" />
<label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
Sizing
Set heights using classes like .form-control-lg and
.form-control-sm.
<mdb-form-control>
<input mdbInput type="text" id="formControlLg" class="form-control form-control-lg" />
<label mdbLabel class="form-label" for="formControlLg">Form control lg</label>
</mdb-form-control>
<mdb-form-control>
<input mdbInput type="text" id="formControlDefault" class="form-control" />
<label mdbLabel class="form-label" for="formControlDefault">Form control default</label>
</mdb-form-control>
<mdb-form-control>
<input mdbInput type="text" id="formControlSm" class="form-control form-control-sm" />
<label mdbLabel class="form-label" for="formControlSm">Form control sm</label>
</mdb-form-control>
Disabled
Add the disabled boolean input on an element with mdbInput directive
to give it a grayed out appearance and remove pointer events.
<mdb-form-control>
<input
mdbInput
class="form-control"
id="formControlDisabled"
type="text"
placeholder="Disabled input"
aria-label="disabled input example"
[disabled]="true"
/>
<label mdbLabel class="form-label" for="formControlDisabled">Disabled</label>
</mdb-form-control>
Readonly
Add the readonly boolean input on an element with mdbInput directive
to prevent modification of the input’s value. Read-only inputs appear lighter (just like
disabled inputs), but retain the standard cursor.
<mdb-form-control>
<input
mdbInput
class="form-control"
id="formControlReadonly"
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
[readonly]="true"
/>
<label mdbLabel class="form-label" for="formControlReadonly">Readonly</label>
</mdb-form-control>
Types
Input types let you specified what data users should provide and help you validate it.
Text
The input type="text" defines a single-line text field.
<mdb-form-control>
<input mdbInput type="text" id="typeText" class="form-control" />
<label mdbLabel class="form-label" for="typeText">Text input</label>
</mdb-form-control>
The input field type="email" defines the email address field. The input value is automatically validated to ensure that it is a properly formatted email address
<mdb-form-control>
<input mdbInput type="email" id="typeEmail" class="form-control" />
<label mdbLabel class="form-label" for="typeEmail">Email input</label>
</mdb-form-control>
Password
The input field type="password" defines a password field, thus hiding characters as confidential information.
<mdb-form-control>
<input mdbInput type="password" id="typePassword" class="form-control" />
<label mdbLabel class="form-label" for="typePassword">Password input</label>
</mdb-form-control>
Number
The input type="number" defines field for entering a number.
<mdb-form-control>
<input mdbInput type="number" id="typeNumber" class="form-control" />
<label mdbLabel class="form-label" for="typeNumber">Number input</label>
</mdb-form-control>
Phone number
The input type="tel" defines a field for entering a telephone number.
<mdb-form-control>
<input mdbInput type="tel" id="typePhone" class="form-control" />
<label mdbLabel class="form-label" for="typePhone">Phone number input</label>
</mdb-form-control>
URL
The input type="url" defines a field for entering a URL.
<mdb-form-control>
<input mdbInput type="url" id="typeURL" class="form-control" />
<label mdbLabel class="form-label" for="typeURL">URL input</label>
</mdb-form-control>
Textarea
The textarea tag defines a multi-line text input control.
<mdb-form-control>
<textarea mdbInput class="form-control" id="textAreaExample" rows="4"></textarea>
<label mdbLabel class="form-label" for="textAreaExample">Message</label>
</mdb-form-control>
Text
Block-level or inline-level form text can be created using .form-text.
Associating form text with form controls
Form text should be explicitly associated with the form control it relates to using the
aria-describedby attribute. This will ensure that assistive technologies—such as
screen readers—will announce this form text when the user focuses or enters the control.
Form text below inputs can be styled with .form-text. If a block-level element
will be used, a top margin is added for easy spacing from the inputs above.
<mdb-form-control>
<input
mdbInput
type="text"
id="formTextExample1"
class="form-control"
aria-describedby="textExample1"
/>
<label mdbLabel class="form-label" for="formTextExample1">Example label</label>
</mdb-form-control>
<div id="textExample1" class="form-text">
We'll never share your email with anyone else.
</div>
Inline text can use any typical inline HTML element (be it a <span>,
<small>, or something else) with nothing more than the
.form-text class.
<div class="row g-3 align-items-center">
<mdb-form-control class="col-auto">
<input
mdbInput
type="password"
id="formTextExample2"
class="form-control"
aria-describedby="textExample2"
/>
<label mdbLabel class="form-label" for="formTextExample2">Password</label>
</mdb-form-control>
<div class="col-auto">
<span id="textExample2" class="form-text"> Must be 8-20 characters long. </span>
</div>
</div>
Character counter
With the help of form-helper, form-counter classes and input's
maxlength attribute you can easily create a character counter.
<mdb-form-control>
<input
mdbInput
[formControl]="input"
type="text"
id="formCharacterCounter"
class="form-control"
aria-describedby="characterCounter"
[maxlength]="maxLength"
/>
<label mdbLabel class="form-label" for="formCharacterCounter">Example label</label>
<div class="form-helper">
<div class="form-counter">{{ characterCount }} / {{ maxLength }}</div>
</div>
</mdb-form-control>
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
input = new FormControl();
characterCount = 0;
maxLength = 20;
constructor() {}
ngOnInit(): void {
this.input.valueChanges.subscribe((value) => {
this.characterCount = value.length;
});
}
}
Input fields - API
Import
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { ReactiveFormsModule } from '@angular/forms';
…
@NgModule ({
...
imports: [MdbFormsModule, ReactiveFormsModule],
...
})
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
disabled |
Boolean | false |
Changes input disabled state |
readonly |
Boolean | false |
Changes input readonly state |
value |
any | - |
Changes input value |