How access form in ng-repeat?

Question

Here is clear exampel about forms:

<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<input type="text"
       name="input_{{$index}}_0"></input>
<!-- ... -->

Ok, but how I should access $valid field from form? E.g this does not work:

{{namesForm_$index.$valid}}

Even {{namesForm_$index}} outputs 0.

It is need to "inline" $index before {{}} resolve a variable name. How to do that?

where do you want to access it? in an ng-disabled? in a custom directive within the form? do you want to output the value on the screen? this is a substantial detail that's missing here — jannis, Nov 23 '17 at 21:05

Danish · Answer 1 · 2017-11-24T08:43:59.553

0

{{ IsFormValid($index) }}

$scope.IsFormValid = function(index) {
   var form = angular.element("formName" + index);
   return form.$valid;
};

UPDATED

Working example:

{{ IsFormValid($index) }}

$scope.IsFormValid = function(index) {
   var form = angular.element(document.getElementById('#bucketForm-' + index);
   return form.$valid;
};

New Approach

The below is an example for dynamic ngModel, same can be replicated for form name :

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

edited Nov 24 '17 at 08:43

answered Nov 23 '17 at 18:15

Danish

497
5
14

No, no, no. The question is how get form object when it has dynamic name :) – Cherry Nov 23 '17 at 18:26
ok, then you might want to call a function sending the $index as param and returning the form name or is the form valid or not.... {{ IsFormValid($index) }} – Danish Nov 23 '17 at 18:31
Thanks for quick reply, but `angular.element("formName" + index)` gives me `Looking up elements via selectors is not supported by jqLite` :( – Cherry Nov 24 '17 at 04:27
I see, let me look it up again. – Danish Nov 24 '17 at 07:05
I have updated the example, but now I have `Referencing DOM nodes in Angular expressions is disallowed!` because I am trying to set class value. – Cherry Nov 24 '17 at 07:40
still looking into it. Please wait. – Danish Nov 24 '17 at 08:36

Piotr Lewandowski · Answer 2 · 2017-11-23T18:43:52.913

It's not easy to get it inside of single {{ }} expression, but if you only want to use it in directives accepting expressions without handlebar (like ng-disabled), you can achieve that:

<div ng-app>
    <ng-form name="namesForm_{{$index}}" ng-repeat="name in [1, 2]">
      <input type="text" 
             placeholder="{{$index}}"
             ng-required="true"
             ng-model="test"
             name="hey" />
      
      <button ng-disabled="!namesForm_{{$index}}.$valid">
        send
      </button>
     
    <br />
</ng-form>
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

How access form in ng-repeat?

2 Answers2