Angular MDBootstrap Forms Input Component

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use the Forms Input Component in Angular MDBootstrap.

Forms Inputs Component allows a user to make a field in which the user can input some text, number, etc. The Forms are generally used to receive & transmit the user’s data.

List of types of Form Inputs in MDBootstrap:

• button: It is used to define the clickable button in the form.
• checkbox: It is used to define a checkbox field.
• email: It is used to define a field for the email addresses.
• file: It is used to specify the file select field and add a button to choose a file for upload to the form.
• hidden: It is used to define the visibility of form elements.
• number: It is used to specify an input field for entering a number.
• password: It is used to specify the password field of an input tag.
• radio: It is used to define a Radio Button.
• range: It is used to define control for a number entered by the user. 
• reset: It is used to define a reset button.
• search: It is used to define a text field that entered a search string.
• submit: It is used to define a submit button.
• tel: It is used to define a field that enters a user’s telephone number.
• text: It is used to define a single-line text field.
• textarea: It is used to specify the one or more forms that the <Textarea> element belongs to. 

Syntax:

<div class="md-form">
   <input mdbInput/>
   <label>Label:</label>
</div>

Approach:

• Download Angular MDBootstrap from the official site.
• Extract the files and change them to the working directory.
• Install npm in the current project using the following command:

npm install

• After creating your project folder i.e. appname, move to it using the following command:

cd appname

• Start the server using the following command:

ng serve

Project Structure: After complete installation, it will look like the following:

Project Structure

Example 1: This is the basic example that illustrates how to use the Forms Inputs Component in Angular MDBootstrap.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input mdbInput placeholder="Input Text Here!" type="text" class="form-control"/>
        <label >Label:</label>
    </div>
</div>

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: In this example, we will know how to make a two-way binding in the forms inputs component.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input mdbInput placeholder="Input Text Here!"
               [(ngModel)]="g"
               type="text"
               class="form-control"/>
        <label >Label:</label>
        <p> {{g}}</p>
    </div>
</div>

Filename: app.component.ts

html

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  g = '';
}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 3: In this example, we will know how to change the size of the forms inputs component.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input mdbInput placeholder="Input Text Here!"
               type="text"
               class="form-control form-control-sm"/>
        <label >Label:</label>
        <input mdbInput placeholder="Input Text Here!"
               type="text"
               class="form-control form-control-lg"/>
    </div>
</div>

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 4: In this example, we will know how to add icons in the forms inputs component.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <mdb-icon fab icon="angular"
                  class="prefix"></mdb-icon>
        <input mdbInput placeholder="Input Text Here!"
               type="text"
               class="form-control" />
        <label >Label:</label>
    </div>
</div>

Filename: app.component.ts

javascript

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 5: In this example, we will know how to add a placeholder in the forms inputs component.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input mdbInput placeholder="Input Text Here!"
               type="text"
               class="form-control"/>
        <label >Label:</label>
    </div>
</div>

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 6: In this example, we will know how to add Prefilling Text Inputs in the forms inputs component.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input value="GeeksforGeeks"
               mdbInput placeholder="Input Text Here!"
               type="text"
         class="form-control"/>
        <label >Label:</label>
    </div>
</div>

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 7: In this example, we will know how to disable the forms inputs component.

Filename: app.component.html

html

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Inputs Component</h4>
    <br />
    <div class="md-form">
        <input disabled mdbInput placeholder="Input Text Here!"
               type="text"
         class="form-control"/>
        <label >Label:</label>
    </div>
</div>

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {}

Filename: app.module.ts

javascript

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";
import { MDBBootstrapModule } from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Reference: https://mdbootstrap.com/docs/angular/forms/inputs/