paulyoder / angular-bootstrap-show-errors

An Angular directive for Bootstrap to intelligently show form validation errors
MIT License
331 stars 77 forks source link

Throws error if used in a directive #49

Open 360disrupt opened 9 years ago

360disrupt commented 9 years ago

I'm asking this, because I think it is worth to find an example in the docs explaining how to include the directive in own directives.

When including the directive into my own directive I have the following problem: The $error property is required if the input field is left blank in the main app. In my directive the $error property has no requiredproperty. I can display error message still, because the has-error class is added but I think it is better to work with ng-if.

Main File (HTML)

<form name="myDataForm" ng-submit="save()">
<myDirective form="myDataForm" model="myModel" itemname="someName" error-msg="abc"></myDirective>
</form>

Directive (Coffee)

angular.module 'tsd.myDirective', ['ui.bootstrap.showErrors', 'tsd.fatSearch', 'myManageSomesService']
  .directive 'myDirective', ($http, $rootScope, manageSomesService) ->
    return {
      restrict: 'E'
      replace: true
      scope:
        form: '='
        model: '='
        size: '@'
        itemname: '@'
        label: '@'
      templateUrl: 'directives/autocomplete-some/autocomplete-some.html'
      controller: 'AutocompleteSomeCtrl'
    }

Directive (HTML)

  <div class="form-group search-field" ng-class="size" show-errors>
    <label>{{label}}</label>
    <input type="text" class="form-control" name="{{itemname}}" ng-model="model" required placeholder="{{label}}" id="searchInput" ng-keydown="checkKeyDown($event)" ng-change="search()" required/>
  <p class="help-block" ng-if="form[itemname][$error]">{{errorMsg}}</p>
...