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;      
    }
  }

Answer 1

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.