Ideas on how to use with a custom directive?

[mpiasta-ca]

I have a custom directive using a dropdown (which is using the dropdown ui of angular-bootstrap). My directive binds value to the ngModel, and $error messages onto the dom element. I have this wrapped in html like so:

<div class="form-group" show-errors>
  <label for="pickColor">What is your favorite color?</label>

  <my-color-dropdown name="pickColor" ng-model="params.color"></my-color-field>

  <p class="help-block" ng-show="myForm.pickColor.$error.required">
    Color is a required field</p>
  <p class="help-block" ng-show="myForm.pickColor.$error.isNotBlack">
    Your favorite color cannot be black!</p>
</div>

Any idea how I could get this to work?

Right now it complains that no input field with class .form-control is found. But I'm not using an input field, I have a <button></button> which triggers a <ul>...</ul>. The parent wrapper to which I attach the $error messages is a <section> element.

[mpiasta-ca]

Managed to get this working with some duct-tape:

<div class="form-group" show-errors>
  <my-color-dropdown class="form-control" name="pickColor" 
      ng-model="params.color"></my-color-field>
  <p class="help-block" ng-show="myForm.pickColor.$error.required">
    Color is a required field</p>
</div>

Notice that the custom element needs a .form-control class. This will apply unwanted input style to your element; you then just need to target this element to remove the unwanted CSS. The good news is that show-errors will work in this case.

Then you just need to use ctrl.$validators within your directive to set your custom error cases.