JSFiddle - React, Tailwind, and code Playground

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|stripCharacters}}</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 = '';

            });

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

            accountApp.directive("stripCharacters", ['$filter', '$http', function($filter, $http) {
                return {
                    restrict: 'C',
                    link: function(scope, element) {
                        element.bind("keyup", function() {
                            if(scope.account.username !== undefined) {
                                element.val($filter('stripCharacters')(scope.account.username));
                                if(scope.account.username.length > 2) {
                                    scope.toggleShowUsername(true); 
                                    scope.usernameMessage = scope.account.usernameAvailable;
                                } else {
                                    scope.toggleShowUsername(false);
                                }
                            }
                        });
                    }
    ...