AngularJS Form Validation

http://angularjs.org/

by programmieraffe

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>

<div ng:controller="MainCtrl">
    <label for="form.title">Title</label>
    <input name="form.title" />
    
    <!-- One possible implementation: -->
    <span ng:show="true">{{form.title.error_message}}</span>
    
    <input type="submit" ng:click="submit()" value="Submit" />
</div>

JavaScript

angular.service('FUEL', function($resource) {

    // for jsfiddle example:
    return $resource('/echo/json/', {'a':'a'}, {
        'sampleFiddlePost': {
            method:'POST',
            // usually from server backend (server-side-validation)
            params: {
                'json': {
                    'form_errors': [{
                        'title ': 'This field is required '}]
                }
            }
        }
    });
});

angular.service('ResponseValidator', function($resource, $route) {
    // 2DO: custom callback in scope!?
    return function(u, responseHeaders) {
        console.log('// RESPONSE VALIDATOR //', u, responseHeaders);
        // form_errors
        // 2DO: how to get the scope to access the field?
    };
}); // with {$inject: ['$route']} $route in return does not work?

function MainCtrl($route, $location, FUEL, ResponseValidator) {
    var self = this;

    var postData = this.form;
    var postData = {
        'json': {
            'form_errors': [{
                'title ': 'This field is required '}]
        }
    };

    this.submit = function() {

        console.log('Submit', this.form);
        
        //non-GET "class" actions: Resource.action(postData, [parameters], [success], [error])
            
        FUEL.sampleFiddlePost(this.form,{'testParam':1},ResponseValidator);
    }
}
MainCtrl.$inject = ['$route', '$location', 'FUEL', 'ResponseValidator'];