Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Inputs - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile Input

Angular Mobile Input - Bootstrap 4 & Material Design

Wrapping TextField with layout

Every TextField which has mdbInput directive, has to be wrapped with his separated StackLayout. You should use one TextField per one StackLayout wrapper. Without it, TextField may not work correctly.

TextField are great way to get data from user to your application. Now they are available in Material Design on both platforms!


Basic example

Basic example of input with floating label

Android
Android input
iOS
iOS input

        <StackLayout>
          <TextField mdbInput label="Input label"></TextField>
        </StackLayout>
      

With icon

You can use MDBIcon inside TextField wrapper parent

Android
Android input
iOS
iOS input

        <StackLayout>
          <MDBIcon mdbInputIcon name="user" class="fas"></MDBIcon>
          <TextField mdbInput label="Input label" class="mdb-input"></TextField>
        </StackLayout>
      

Disabled

Mix both disabled and ngModel attributes to make TextField disabled. Importing NativeScriptFormsModule and using ngModel is necessary to disable the input with disabled attribute

Android
Android input
iOS
iOS input

        <StackLayout>
          <TextField
            disabled
            mdbInput
            ngModel
            class="mdb-input"
            label="Input label"></TextField>
        </StackLayout>
      

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

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          textField = 'Text';
        }
      

Validation

Our MdbInputModule has possibility to allow you, to use validation in your application. Just use MDBError component with mdbValidate and mdbInput directives to add validation to the TextField.

Android
Android input
iOS
iOS input

        <StackLayout>
          <MDBError [input]="field" text="error"></MDBError>
          <MDBIcon mdbInputIcon name="user" class="fas"></MDBIcon>
          <TextField
            [(ngModel)]="textField"
            validate="true"
            #field="mdbValidate"
            mdbValidate
            mdbInput
            label="Input label"
            minlength="5"></TextField>
        </StackLayout>

      

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

        @Component({
          selector: 'App',
          moduleId: module.id,
        templateUrl: './app.component.html',
        })
        export class AppComponent {
          textField = 'Text';
        }
      

Angular Mobile Inputs - API

In this section you will find informations about inputs and its required modules and available inputs, outputs, methods and events.


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 Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbInputModule } from 'mdb-angular-mobile'

Components

MdbError

Selector: MDBError

Type: MdbErrorComponent


Directives

MdbInput

Selector: mdbInput

Type: MdbInputDirective

MdbValidate

Selector: mdbValidate

Type: MdbValidateDirective


Inputs

MdbInputDirective
Name Type Default Description Example
label string ' ' Allow to set the value for the floating label. label="user"
highlightColor string '#4285f4' Allow to set the highlight color for focused TextField. Works on both platforms. highlightColor="#303030"
MdbValidateDirective
Name Type Default Description Example
mdbValidate boolean - Determines if TextField should be validated or not. [mdbValidate]="true"
MdbErrorComponent
Name Type Default Description Example
text string ' ' Allow to set the text for error message. text="Error message text"
input MdbValidateDirective - Binds the template reference for the TextField. [MdbValidateDirective]="input"