Pass form input (not whole form) object to directive in Angularjs

Question

I am trying to pass formName.formInput to a directive so that inside of the directive template I can use ngMessages='passedFormInput.$error'

My goal is to create a short cut directive for ngMessages for generic form errors.

I have a plunker: https://plnkr.co/edit/SakHtD2cCqrzwAssclgp

I want my directive to just require the <formName>.<inputName>

<form name="form" novalidate>

    <div class="form-group">
        <label for="userEmail">Email Address </label>
        <input ng-model="credentials.email" maxlength="255" required type="email" class="form-control" id="userEmail" placeholder="Email">
    </div>

    <div rc-messages="form.userEmail"></div>        
</form>

Heres my directive:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
})
.directive('rcMessages', function() {

    return {
        require: ['^form', '^rcMessages'],
    restrict: 'A',          // Must be a attributeon a html tag
        template: '<pre><code>formInputError: {{formInputError | json }}</code></pre>' +
          '<pre><code>testForm: {{testForm | json }}</code></pre>' +
          '<div ng-messages="formInputError.$error">' +
          '<span ng-message="required">*</span>' +
          '<span ng-message="minlength">Too short.</span>' +
          '<span ng-message="maxlength">Too long.</span>' +
          '<span ng-message="email">Invalid email address.</span>' +
          '</div>meep',
        scope: false,
        controller: ['$scope', function($scope) {
            $scope.formInput = $scope.rcMessages;
            console.log('rcMessages', $scope.rcMessages);
            console.log('formInputError', $scope.formInputError);
        }],
        link: function($scope, element, attrs, ctrl) {
            $scope.testForm = ctrl;
            console.log('ctrl', ctrl);
        }
    };

});

I'm able to get the form controller by using ^Form but I cannot seem to zero in on a particular element in the form.

------ EDIT: SOLUTION for anyone who is looking. -----

I realized my mistake was that I wasnt adding a name to the input. When given a name that input object is added to the FormController and I was able to access it by sending the input name through the rc-messages property.

Please see my updated plunker: https://plnkr.co/edit/u14S269MOIDxvFzHP1Jt

I'm not sure if would make this any easier, but it seems like it would make much more sense for the directive to be specified on the input itself. — Mike Feltman
– Mike Feltman, Commented Jan 13, 2016 at 16:51
If it was on the input how could I print a string in the label? — RachelD
– RachelD, Commented Jan 13, 2016 at 16:54

jusopi · Accepted Answer · 2016-01-13 17:26:40Z

2

You were missing the name value on your input, that's why you can't access the input's value on the form controller. You can fix it with this:

<input name="userEmail" ng-model="credentials.email" maxlength="255" required 
       type="email" class="form-control" id="userEmail" placeholder="Email">

Then inside your link function, you can access the ngModelController value like so:

link: function($scope, elem, attrs, ctrls){
    var inputModel = ctrls[0].userEmail

By the way, I'm not sure why, but I find this a little suspect:

<div rc-messages="form.userEmail">

Maybe just give it the key and allow the directive to parse the formController for the value of the key userEmail?

<div rc-messages="userEmail">

Just a suggestion.

https://plnkr.co/edit/gcgeT6pzae3UbX7ZWMWi?p=preview

edited Jan 13, 2016 at 17:26

answered Jan 13, 2016 at 17:21

jusopi

6,8133 gold badges37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RachelD Over a year ago

Thank you. This is exactly what my issue was.

Collectives™ on Stack Overflow

Pass form input (not whole form) object to directive in Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related