Angular JS ng-message inside directive

Question

I have some input fields inside custom directive. I\'m trying to use ng-message to display validation error text for the fields inside custom directive.

When I do submit

Answer 1

You have explicitly defined isolated scope for your directive, so plnkrForm does not exist. Quickest way to fix this is that you drop the isolated scope. Based on your example, you don't need it anyway.

So directive becomes

app.directive('nameInfo', function() {
  return {
    templateUrl: 'name.html'
  };
});

And this being the case, directive is a bit of an overkill. You could get same result using ng-include, too. So you could replace this

<name-info 
  name="vm.identity.name" 
  submitted="submitted">
</name-info>

with this

<div ng-include="'name.html'"></div>

---

If you insist doing this using a directive and isolated scope, here's how it's done. Pass form into directive and use it in your template/link/controller and change template accordingly.

In your "main" page

<name-info form="plnkrForm" name="name"></name-info>

JavaScript

app.directive('nameInfo', function() {
  return {
    templateUrl: 'name.html',
    scope: {
      form: '=',
      name: '='
    }
  };
});

Directive template

<div class=form-group>
  <input type="text" 
         class="form-control" 
         placeholder="Firstname" 
         name="firstname" 
         ng-model="name.firstname" 
         required="true">
  <div role="alert" 
       ng-messages="form.firstname.$error" 
       data-ng-if="form.$submitted && form.firstname.$invalid">
       <span class="error" ng-message="required">Required</span>
  </div>
</div>

---

Now, I know your intentions are good as you want to avoid "DRY". If you study the examples, you'll notice that you get same result, functionality and reusability by using simple ng-include. Here we have achieved nothing but added, unnecessary complexity.