Using ngMessages

ngMessages is a good replacement for the validation popovers rolled into autofields-bootstrap Thanks to @scottnath we have a great example of how to add this to your autofields instance.

angular.module('autofields.ngMessages', ['autofields.core'])
  .config(['$autofieldsProvider', function($autofieldsProvider){

  // ngMessages support property
  $autofieldsProvider.registerMutator('ngMessages', function(directive, field, fieldElements){
    // check if ngMessages is turned on
    if(!field.ngMessages) return fieldElements;

    // we need to contain ngMessages in it's own form
    var subformName = 'ngMessages'+field.property;
    fieldElements.fieldContainer.attr('ng-form',subformName);
    fieldElements.ngMessages = angular.element('<div/>');
    fieldElements.ngMessages.attr('ng-messages', [subformName,field.property,'$error'].join('.'));
    fieldElements.fieldContainer.append(fieldElements.ngMessages);

    // combine defined messages and default messages
    var allMsg = angular.extend({}, directive.options.validation.defaultMsgs, field.msgs);

    angular.forEach(field.attr, function(value, key){
      if (
        (allMsg && allMsg[key] != null) // allMsg exists and this attribute is among them
        &&
        (field.attr && field.attr[key] != null) // attr exists and this error is in it
      ){
        //Add individual messages for each error
        var ngMessage = angular.element('<div/>');
        ngMessage.attr('ng-message', key);
        ngMessage.html(allMsg[key]);
        fieldElements.ngMessages.append(ngMessage);
      }
    });
    return fieldElements;
  });
}]);