JSFiddle - React, Tailwind, and code Playground

by plantface

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
    <form name="form" novalidate>
        <label for="name" ng-class="{'error': form.name.$invalid}">name</label>
        <input id="name" name="name" type="text" ng-model="newPerson.name" required 
           ensure-expression="{unique: (persons | filter:{name: newPerson.name}:true).length !== 1}"></input>
        <button type="submit" ng-disabled="form.$invalid" ng-click="sendFormToServer()">log in!</button>
        <div class="help" ng-show="form.name.$error.required">name is required</div>
        <div class="help" ng-show="form.name.$error.unique">name must be unique</div>
    </form>
    
    <p>known persons: {{persons}}</p>
</div>

CSS

.form-group .alert {
  padding: 0px;
  margin-bottom: 0px;
}

.error {
    color: red;
}

.help {
    color: gray;
}

JavaScript

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

app.directive('ensureExpression', ['$parse', function($parse) {
	return {
		require: 'ngModel',
		link: function(scope, ele, attrs, ngModelController) {
			scope.$watch(attrs.ngModel, function(value) {
				var expressionResults = $parse(attrs.ensureExpression)(scope);
				for (var expressionName in expressionResults) {
					ngModelController.$setValidity(expressionName, expressionResults[expressionName]);
				}
			});
		}
	};
}]);

app.controller('MainCtrl', function($scope) {
    $scope.persons = [{name: 'john'}, {name: 'paula'}, {name: 'Scruath from the 5th Sector'}];
    $scope.newPerson = {};
    $scope.sendFormToServer = function() {
        alert('sending to server...');
    };
});