Accessing element dynamically from scope angular

Question

In a directive like below how can we set validation manually on other element passed through attributes in directive. Code below gives error otherField does not exist while it should take value of this variable and not directly name of this field in scope string.

app.directive('higherThan', [
  function() {

    var link = function($scope, $element, $attrs, ctrl) {

      var otherField = $attrs.otherField;
      $scope.otherField.$setValidity('lowerThan', true);
      //Other details of directive not kept for simplicity
    }

    return {
      require: 'ngModel',
      link: link
    };

  }
]);

HTML

<form name="main_form">
<label>From</label>

<input name="from_date" type="text" class="form-control" ng-model="date_range[0]" lower-than="date_range[1]" ng-required="true" close-text="Close"  />

<label>To</label>

<input name="to_date" type="text" class="form-control" ng-model="date_range[1]" higher-than="date_range[0]" ng-required="true" close-text="Close" other-field="from_date"/>

<span ng-show="main_form.to_date.$error.higherThan">From date should be lower than to date</span>
</form>

could you show us your html too?

Pankaj Parkar
– Pankaj Parkar

2015-07-04 10:49:34 +00:00
Commented Jul 4, 2015 at 10:49 — Pankaj Parkar
– Pankaj Parkar, Commented Jul 4, 2015 at 10:49

james · Accepted Answer · 2015-07-04 13:47:37Z

1

var otherField = $attrs.otherField;
$scope.otherField.$setValidity('lowerThan', true);

There are a few of issues here:

1) var otherField is a string, not the actual input.

2) Once you've set var otherField you're not actually using it for anything.

3) There's no property $scope.otherField, which is why you're getting the error.

Even if you did $scope[otherField] this would error, as the ngModelController for from_date does not belong to $scope it belongs to main_form.

You should try using console.log($scope) to investigate.

It should be:

app.directive('higherThan', [
    function($parse) {

        var link = function($scope, $element, $attrs, ctrl) {

            var otherField = $parse($attrs.otherField)($scope);
            otherField.$setValidity('lowerThan', true);
            //Other details of directive not kept for simplicity
        }

        return {
            require: 'ngModel',
            link: link
        };

    }
]);


<form name="main_form">
  <label>From</label>
  <input name="from_date" type="text" class="form-control" ng-model="date_range[0]" lower-than="date_range[1]" ng-required="true" close-text="Close" />
  <label>To</label>
  <input name="to_date" type="text" class="form-control" ng-model="date_range[1]" higher-than="date_range[0]" ng-required="true" close-text="Close" other-field="main_form.from_date" />
  <span ng-show="main_form.to_date.$error.higherThan">From date should be lower than to date</span>
</form>

edited Jul 4, 2015 at 13:47

answered Jul 4, 2015 at 13:05

james

4,7273 gold badges34 silver badges44 bronze badges

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

1 Comment

virtualfireofhopes Over a year ago

Thanks, was confused about parse stuff and converting string to variable names!

dfsq · Accepted Answer · 2015-07-04 12:07:48Z

0

$setValidity should be called on NgModelController object:

var link = function($scope, $element, $attrs, ctrl) {

    var otherField = $attrs.otherField;
    ctrl.$setValidity('lowerThan', true);
    //Other details of directive not kept for simplicity
}

answered Jul 4, 2015 at 12:07

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Accessing element dynamically from scope angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related