autoFields Addition Demo

README.md

Validation Addition

Please do not share this demo with the world, I am really bad at jsfiddle.
Temporary Demo can be found here

Added default required validation message when validation fails for a required field that has become dirty. In addition, there is now an errorMsg that you can specify in the schema.

This behavior is limited to text inputs until I have a better understanding of what I am doing.

##Additional Field Schema

• errorMsg Failed validation message when the input becomes dirty

##Resources that I used a lot

• Original Code
• Updated Code
• Validation tutorial from the folks over at ng-newsletter
• Plenty more that I cannot remember

##Notes

• ng-book is a great resource that I didn't have yet when I added this. I am still not to sure how directives work or if I did anything right. I plan to dive into the book and get my hands dirty

request-creation.html

<div class="container" ng-controller="RequestCreationCtrl">
  <form name="joinForm" >
    <auto:fields fields="schema" data="request" form="joinForm"></auto:fields>
    <button ng-click="join()" class="btn btn-default btn-lg btn-block" ng-class="{'btn-primary':joinForm.$valid}" tabindex="100">Join</button>
  </form>
</div>

request.js

var requestControllers = angular.module('requestControllers', [])


requestControllers.controller('RequestCtrl', ['$scope', 'resolvedItems', '$location', '$filter',
  function($scope, resolvedItems, $location, $filter) {
    $scope.columnCollection = [
      {label: 'Id', map: 'id'},
      {label: 'Type', map: 'type'},
      {label: 'Reason', map: 'reason'}
    ]

    $scope.globalConfig = {
      isPaginationEnabled: true,
      itemsByPage: 5,
      maxSize: 8
    };

    $scope.requests = resolvedItems;
    $scope.totalItems = resolvedItems.length;
    $scope.createNewRequest = function() {
      $location.path('/request/create')
    }
  }
])

requestControllers.controller('RequestCreationCtrl', ['$scope', 'Restangular', '$location',
  function($scope, Restangular, $location) {

    $scope.request = {
      type: '',
      reason: ''
    };

    $scope.schema = [
      {property: 'type', type: 'text', attr: {ngMinlength: 2, required: true}, errorMsg: 'Should be at least 2 characters.'},
      {property: 'reason', type: 'text', attr: {ngMinlength: 5, required: true}, errorMsg: 'Should be at least 5 characters.'}

    ];

    $scope.join = function() {
      if (!$scope.joinForm.$valid) {
        console.log('Join form is: ' + $scope.joinForm.$valid);
        return;
      }
      $scope.createNewRequest();
    };

    $scope.createNewRequest = function() {
//      RequestFactory.create($scope.request)
      Restangular.all('requests1').post($scope.request).then(
              function(request) {
                $location.path('/request')
              })
    };
  }
])

style.css

<style type="text/css">
  .help-inline.error {
    display: block;
    padding: 0.375em 0.25em;
    margin-top: -1em;
    margin-bottom: 1em;
    font-size: 0.75em;
    font-weight: bold;
  }
</style>

Thanks for the gist @Snugglepantz I've implemented validation and validation messages in the latest version. I implemented it a bit differently, but I think that ultimately it provides for more flexibility.