It is possible make the required value dependet of some funcion? Something like this? I want to do this because I want to change the required attribute to some form inputs...

HTML:

Name: <input type="text" ng-model="user.name"  ng-required="isRequired('name')" />
Age: <input type="text" ng-model="user.age"  ng-required="isRequired('age')" />

JS:

$scope.isRequired(fieldName){
         $scope.requiredFields = [];
         //$scope.requiredFields = STUFF FROM SOME REST SERVICE
        for (i in requiredFields) {
           if (requiredFields[i] == fieldName){
                return true;
           }
        }
        return false;
    }

It is possible make the required value dependet of some funcion? Something like this? I want to do this because I want to change the required attribute to some form inputs...

HTML:

Name: <input type="text" ng-model="user.name"  ng-required="isRequired('name')" />
Age: <input type="text" ng-model="user.age"  ng-required="isRequired('age')" />

JS:

$scope.isRequired(fieldName){
         $scope.requiredFields = [];
         //$scope.requiredFields = STUFF FROM SOME REST SERVICE
        for (i in requiredFields) {
           if (requiredFields[i] == fieldName){
                return true;
           }
        }
        return false;
    }

• javascript
• angularjs

Share Improve this question Follow edited Mar 24, 2017 at 12:42 Bob 5,6281010 gold badges5151 silver badges8080 bronze badges asked May 6, 2015 at 9:42 JohnJohn 2,17355 gold badges3030 silver badges5959 bronze badges 5

• Could you precisely describe what you want to do. And no its not possible but we could figure out another way – Pratik Commented May 6, 2015 at 9:43
• 2 @ramamoorthy_villi you can't. ng-required can only take a boolean. – Pratik Commented May 6, 2015 at 9:48
• I want to change if field is required or not, but I have too many fields and I was trying to create a function to check instead of creating a boolean for each fields in controller. – John Commented May 6, 2015 at 9:54
• 1 if you are willing to have a button, @tpie's answer does the trick for you – Pratik Commented May 6, 2015 at 9:54
• Name: <input type="text" ng-model="user.name" ng-required="isRequired('name')" /> Age: <input type="text" ng-model="user.age" ng-required="isRequired('age')" /> – John Commented May 6, 2015 at 10:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Updated Answer: So based on your updated OP, what you want is certainly doable. The problem with what you were trying to do is that ng-required has no ability to execute a function, it only reads a boolean. But we can dynamically create variables based on data from the server to automatically set fields to required:

Updated Plunker

<form>
  Name: <input type="text" ng-model="user.test"  ng-required="name" /><br/>
  <input type="text" ng-model="user.name"  ng-required="age" />
  <br/>
  <button type="submit">Submit</button>
</form>

Note that I put a $scope property for each input in the ng-required attribute. Now we can dynamically create that $scope property and set it to true if our data says we need to:

  $scope.isRequired = function(){
         $scope.requiredFields = [];
         $http.get('fields.json')
         .success(function(data){
           $scope.requiredFields = angular.fromJson(data);
            console.log($scope.requiredFields.required)
           for (i = 0; i < $scope.requiredFields.required.length; i++) {
           $scope[$scope.requiredFields.required[i]] = true
            }
            console.log($scope[$scope.requiredFields.required[0]]);
         })

         //$scope.requiredFields = STUFF FROM SOME REST SERVICE

    }
    $scope.isRequired()

So it is iterating over an array of required fields received from the server, and then dynamically creating a $scope property for each one that is required, and setting it to true. Any field that has that $scope property in it's ng-required will be required now. Anything not dynamically created will just return false, and ng-required doesn't trigger.

---

Original answer:

Plunker

As Pratik mentioned, ng-required only accepts a Boolean value, but we can toggle the value of that with a function.

HTML

  <form>
    Name: <input type="text" ng-model="user.name"  ng-required="isRequired" />
    <br/><button ng-click="toggle()">Required: {{isRequired}}</button>
    <button type="submit">Submit</button>
  </form>

code:

  $scope.isRequired = true;
  $scope.toggle = function() {
    $scope.isRequired = !$scope.isRequired;
  }

I know this is a couple of years old and so AngularJS may have changed, but the accepted answer as it stands today isn't correct. You can very easily execute a function within ng-required, as it takes an expression, which can be a function. For example:

index.html

<div ng-controller="ExampleController" class="expressions">
  Expression:
  <input type='text' ng-model="expr" size="80"/>
  <button ng-click="addExp(expr)">Evaluate</button>
  <ul>
   <li ng-repeat="expr in exprs track by $index">
     [ <a href="" ng-click="removeExp($index)">X</a> ]
     <code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
    </li>
  </ul>
</div>

script.js

angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  var exprs = $scope.exprs = [];
  $scope.expr = '3*10|currency';
  $scope.addExp = function(expr) {
    exprs.push(expr);
  };

  $scope.removeExp = function(index) {
    exprs.splice(index, 1);
  };
}]);

In script.js, a function addExp is defined and added to the scope, and then it's called in the ng-click directive of the a tag, which also takes an expression as its argument.

This code is taken directly from the AngularJS documentation on expressions. It doesn't use ng-require directly, but any directive that takes an expression will work the same. I have used the same syntax to use a function for ng-require.