JSFiddle - React, Tailwind, and code Playground

by vvakame

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-mocks.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="well" ng-app="remoteFormDemo">
    <form novalidate remote-form method='post' target="user" success="changeAuthType" name="registerForm">
        <div class="control-group" ng-class="{error: !registerForm.username.$valid}">
            <div class="controls">
                <input remote-form-component type="text" name="username" ng-model="user.username" placeholder="Username" />
                <span class="help-inline" ng-show="!registerForm.username.$valid && registerForm.username.$error.server">{{ serverValidationError.username }}</span>
            </div>
        </div>
        <div class="control-group" ng-class="{error: !registerForm.email.$valid}">
            <div class="controls">
                <input remote-form-component email type="text" name="email" ng-model="user.email" placeholder="Email" />
                <span class="help-inline" ng-show="!registerForm.email.$valid && registerForm.email.$error.server">{{ serverValidationError.email }}</span>
            </div>
        </div>
        <button type="submit" ng-click="submit(user)" ng-disabled="registerForm.$pristine" class="btn btn-primary">Register</button>
    </form>
</div>

JavaScript

'use strict';

angular
    .module('contentMocks', ['ngMockE2E'])
    .run(function ($httpBackend) {

    $httpBackend.whenPOST('user').respond(function (method, url, data) {
        return [
            400,
            [
                {
                    "propertyPath": "username",
                    "message": "username already_used"
                },
                {
                    "propertyPath": "email",
                    "message": "email blank"
                }
            ]
        ];
    });
});

'use strict';

angular.module('corujaRemoteForm', [])
    .directive('remoteForm', function ($http) {
        function IllegalArgumentException(message) {
            this.message = message;
        }
    
        var forEach = angular.forEach,
            noop = angular.noop;
    
        return {
            'restrict': 'A',
            'scope': true,
            'controller': function ($scope, $element, $attrs) {
                var self = this;
                self.formComponents = {};
                self.registerFormComponent = function (name, ngModel) {
                    self.formComponents[name] = ngModel;
                };
                self.hasFormComponent = function (name) {
                    return self.formComponents[name] != undefined;
                };
                self.getFormComponent = function (name) {
                    return self.formComponents[name];
                };
                
                /**
                 * Every submit should reset the form component, because its possible
                 * that the error is gone, but the form is still not valid
                 */
                self.resetFormComponentsValidity = function () {
                    forEach(self.formComponents, function (component) {
                        component.$setValidity('server', true);
                    });
                }
                
                $scope.serverValidationError = {};
               ...