User-friendly text fields in AngularJS

You can use vTextfild to show (hide) validation messages, error/success input indicators, or interactive Float Labels. It basically adds the following classes to the v-textfield directive:

• is-focused
• is-blured
• is-valid
• is-invalid
• is-dirty
• is-pristine
• is-required
• is-optional
• has-value
• has-noValue
• has-placeholder
• has-noPlaceholder

Demos

• GitHub
• CodePen

Installation

• Use bower bower install v-textfield, or download files from the github repo
• Reference v-textfield.css and v-textfield.js in your index.html file
• Reference the module in your app: angular.module('myApp', [ 'vTextfield' ])

Usage

<v-textfield class="Textfield--default">
  <label hint="Optional">Name</label>
  <input name="myName" type="text" ng-model="model.myName" v-textfield-input>
</v-textfield>

<v-textfield class="Textfield--default">
  <label>Email</label>
  <input name="myEmail" type="email" ng-model="model.myEmail" required v-textfield-input>

  <ng-messages for="myForm.myEmail.$error">
    <ng-message when="email">Please enter a valid email address.</ng-message>
    <ng-message when="required">You did not enter a email address.</ng-message>
  </ng-messages>
</v-textfield>

<v-textfield class="vTextfield--default">
  <label>Password</label>
  <input name="myPassword" type="password" ng-model="model.myPassword" ng-minlength="6" required v-textfield-input>

  <ng-messages for="myForm.myPassword.$error">
    <ng-message when="minlength">Your password is too short.</ng-message>
    <ng-message when="required">Please enter a password.</ng-message>
  </ng-messages>
</v-textfield>