title: Invalidate form by custom component | AngularJS
body: <p>I've searched my way, but can't figure this out. I made a directive <code>manyToOneSelect</code> (custom component) that loads items from the server, shows them to the user and lets the user pick one. That works well, but I cannot figure out how to prevent the form from being submitted if no item is picked by the user, i.e. how to invalidate the form.</p>
  
  <p>Below is pretty much the directive:</p>
  
  <pre><code>angular.module('myApp.directives').
      directive('manyToOneSelect', function(entityService) {
          return {
              restrict:'E',
              templateUrl:'partials/control/n21select.html',
              scope:{
                  entityName:'@',
                  entityField:'@',
                  bindVariable:'='
              },
              compile:function (tElement, tAttrs, transclude) {
                  return function (scope, element, attrs) {
                      var inner = element.children("#n21select");
                      scope.entities = [];
                      scope.$watch('entityName', function ($new, $old) {
                          entityService.getList(scope.entityName, function (data) {
                              scope.entities = data;
                          }, []);
                      }, true);
                      scope.lookup = function(uuid) {
                          for(var i in scope.entities) {
                              if(scope.entities[i].uuid == uuid) {
                                  return scope.entities[i];
                              }}}}}}});
  </code></pre>
  
  <p>Here is the corresponding partial <code>partials/control/n21select.html</code>:</p>
  
  <pre><code>&lt;select ng-hide="disable" ng-options="entity.uuid as entity[entityField] for entity in entities" ng-model="bindVariable" required&gt;&lt;/select&gt;
  &lt;span ng-show="disable"&gt;{{lookup(bindVariable)[entityField]}}&lt;/span&gt;
  </code></pre>
  
  <p>Here is how I use the directive:</p>
  
  <pre><code>&lt;form ng-href="#/" ng-submit="save()"&gt;
  &lt;many-to-one-select entity-name="customer" entity-field="name"
      bind-variable="entity.customerUuid"&gt;&lt;/many-to-one-select&gt;
  ...
  </code></pre>
  
  <p>My problem seems lack of strategy, rather than "not entirely getting it to work", hence you don't see any attempt in the code I posted above. Let this be then a fairly open question: how to do it? :) Much appreciated already!</p>