JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<form ng-app="accountApp" ng-controller="AccountCtrl" method="POST">
    <fieldset class="group">
        <div class="form-field group">
            <label>Choose a username</label>
            <input type="text" name="username" id="username"
            class="username stripCharacters"
            ng-model="account.username" autocomplete="off" />
            <p ng-show="showUsername" class="form-help {{ account.usernameStateClass }}">{{ usernameMessage }}</p>
            <p class="form-help">Your url: myurl.com/{{account.username}}</p>
        </div>
    </fieldset>
</form>

JavaScript

var accountApp = angular.module('accountApp', []);

           accountApp.factory('accountData', function () {
               return {
                   username: 'username',
                   usernameAvailable: 'This username is available!',
                   usernameUnavailable: 'I\'m sorry this username is not available',
                   usernameStateClass: 'available'
               }
           });

           accountApp.controller('AccountCtrl', function ($scope, accountData) {

               $scope.toggleShowUsername = function (state) {
                   $scope.showUsername = state;
               };

               //set defaults
               $scope.account = accountData;
               $scope.showUsername = false;
               $scope.usernameMessage = '';

               $scope.$watch('account.username', function (value) {
                   if (value.length > 2) {
                       $scope.toggleShowUsername(true);
                       $scope.usernameMessage = $scope.account.usernameAvailable;
                   } else {
                       $scope.toggleShowUsername(false);
                   }
               });
           });

           accountApp.filter('stripCharacters', function () {
               return function (text) {
                   if (text !== undefined) {
                       return text.toLowerCase().replace(/[^_0-9a-z]/g, '');
                   }
               }
           });

           accountApp.directive("stripCharacters", ['$filter', function ($filter) {
               return {
                   restrict: 'C',
                   require: 'ngModel',
                   link: function (scope, element, attrs, ngModel) {
                       ngModel.$parsers.unshift(function (value) {
                           var stripped = $filter('stripCharacters')(value);
                           element.val(stripped);
                           return stripped;
                       });
                   }
    ...