angular - Dynamically changing validation requirements between form elements in directives

Question

I have a form with many form inputs. All the form inputs are in directives.

I have some scenarios where I need the state of one element to affect attributes, like ng-required, of other form elements.

I'm having a hard time figuring out how to update the ng-required field/$valid in the other form elements - they remain at a state of $valid = false - I want to dynamically change the ng-required value to false so they are no longer required and the elements become valid.

In the scenario below/at plnkr, if you type text in the first Title element, the second element, Title2, should no longer be required, but it remains at $valid=false.

I've tried using a function passed into the directive, like the below, but it doesn't seem to be updating the form element's validity...

Plnkr! http://plnkr.co/edit/gCpB7dvBjiOisocjJNlz?p=preview

$scope.toggleRequired = function(content, contentFragment){
    if (contentFragment.name =='title' && angular.isDefined(contentFragment.value) && contentFragment.value.length){
      $scope.content.title2.required=false;      
      content.title2.required=false;      
    }else if (contentFragment.name =='title' && !angular.isDefined(contentFragment.value)){
      $scope.content.title2.required=true;      
      content.title2.required=true;      
    }
  }

runTarm · Accepted Answer · 2014-07-26 07:46:44Z

14

The ng-required actually accept an expression, so there is no need to add {{ .. }} around the variable, otherwise the expression will be evaluated only once at a compile time.

In the textFormElement.html template, change this line:

ng-required="{{contentFragment.required}}"

to this:

ng-required="contentFragment.required"

Plunker: http://plnkr.co/edit/YLInikMU5Dl2hIpHPauy?p=preview

Hope this helps.

answered Jul 26, 2014 at 7:46

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

angular - Dynamically changing validation requirements between form elements in directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related