mdbInputDirective
mdbInputDirective
gives ability to lift up input label, validate input via it's type and adds focus
to checkboxes / radio elements.
Basic example
Basic example with lifting-up input's label and validating through email.
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="email" class="form-control" id="basicExample" mdbInputDirective>
<label for="basicExample">Type your email</label>
</div>
Turn off validate
Basic example with lifting-up input's label and turned off validation.
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="email" class="form-control" id="basicExample" [mdbValidate]="false" mdbInputDirective>
<label for="basicExample">Type your email</label>
</div>
Allowing focus on Checkboxes
Example with allowing to move through checkboxes using focus (TAB key).
<div class="form-check">
<input class="form-check-input" mdbInputDirective type="checkbox" id="checkbox1">
<label class="form-check-label" for="checkbox1">You can focus me</label>
</div>
<div class="form-check">
<input class="form-check-input" mdbInputDirective [focusCheckbox]="false" type="checkbox" class="filled-in" id="checkbox2">
<label class="form-check-label" for="checkbox2">You can't focus me</label>
</div>
Allowing focus on Radio
Example with allowing to move through Radio using focus - TAB key to activate, and arrow up / down to move.
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" mdbInputDirective>
<label class="form-check-label" for="exampleRadios1">
You can focus me
</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" [focusRadio]="false"
mdbInputDirective>
<label class="form-check-label" for="exampleRadios2">
You can't focus me
</label>
</div>