Angularjs: ng-repeat with ng-show input control creation failure

Question

I am having trouble using a ng-repeat value in a ng-show directive.

I have tried a number of solutions, "myForm.".{{value}}.".$error.required" and not having the {{}} and even the example below without the {{}} in the ng-show directive.

It appears that the value being put into the ng-show is messing up. I want to be able to create multiple fields using a variable from the fields (generated by ng-repeat) in naming my input and creating the input control condition.

<form name="myForm">
   <div ng-repeat="fields in logEntry.StringValues">
       {{fields.Title}} <input type="text" name="{{fields.PropertyInfoName}}" ng-model="user" required>

       <span class="error" ng-show="myForm.fields.PropertyInfoName.$error.required">
          Required!
       </span><br>
   </div>

Edit: The following code works, but is without the ng-repeat, that I need.

<form name="myForm">
  SomeText Here: <input type="text" name="testName" ng-model="user" required>
    <span class="error" ng-show="myForm.testName.$error.required">
      Required!
    </span><br>
</form>

Are you looking for something like this: http://jsfiddle.net/thomporter/ANxmv/2/ — drew_w, Jul 03 '14 at 12:20
Yes, the same functionality is provided when I create my above form outside of a ng-repeat directive. But the thing is I need to create a lot of forms and validate on all of them depending on each object returned from my logEntry.StringValues, hence the use of ng-repeat. (I can get the code to work just fine on its own, but inside the ng-repeat, it screws) — Nicklas Kevin Frank, Jul 03 '14 at 12:22
I see. Doing a bit of research I came upon [this question here](http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs). I believe that is one solution. The only other easily accessible option is to build your own directive. Hope that helps! — drew_w, Jul 03 '14 at 13:06

score 0 · Answer 1 · answered Jul 03 '14 at 12:24

0

Try taking away the double braces {{}} inside directives. If you want more specific help, please post the corresponding javascript code.

 <form name="myForm">
      <div ng-repeat="fields in logEntry.StringValues">
        {{fields.Title}} <input type="text" name="fields.PropertyInfoName" ng-model="user" required>
        <span class="error" ng-show="myForm.fields.PropertyInfoName.$error.required">
          Required!
        </span><br>
      </div>
    </form>

answered Jul 03 '14 at 12:24

Alex Pavy

387
2
11

As I mentioned I have already tried this solution, and it still does not work. And there are no corresponding javascript code for this functionality, it is included in the Angular framework. – Nicklas Kevin Frank Jul 03 '14 at 12:28
Well, I think you're going to have to either write many inputs or write your html in a javascript string (that you can manipulate as you want) and then compile that string with a
– Alex Pavy Jul 03 '14 at 13:04
Yeah, thanks for the suggestion. Sadly that isn't going to be possible as in the end the application will be getting a generic amount of tables with generic values and validation. So I need to be able to create the input fields from the object in ng-repeat. – Nicklas Kevin Frank Jul 03 '14 at 13:05

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

The solution was that "since you cannot dynamically generate the name attribute of input elements using interpolation, you have to wrap each set of repeated inputs in an ngForm directive and nest these in an outer form element." The solution linked below allows this to happen by giving each nested form its own scope.

https://stackoverflow.com/a/14379763/2260604

edited May 23 '17 at 12:20

Community

1
1

answered Jul 03 '14 at 13:13

Nicklas Kevin Frank

6,079
4
38
63

vittore · Answer 3 · 2014-07-03T14:01:25.930

0

Remember it is just javascript

 "myForm.".{{value}}.".$error.required"

is just

 myForm[value].$error.required

However you will need to create directive to do what you want to do. As an example of very similar thing implemented in angular you can take a look at https://github.com/gaslight/angular-schema-form here is demo: http://gaslight.github.io/angular-schema-form/

edited Jul 03 '14 at 14:01

answered Jul 03 '14 at 13:19

vittore

17,449
6
44
82

Correct me if I am wrong, this would still not allow me to dynamically create the name of an input element using interpolation? And ng-repeat for that matter? The whole point was to be able to use the built in validation in angular on said input elements using interpolation through the ng-repeat directive to name said elements. Regardless the solution to fixing this problem was to use nested forms around each generated input element. – Nicklas Kevin Frank Jul 03 '14 at 15:37
@Frozire you can create name attribute dynamically if you wrap it up in directive and directive will take care of that on compile or link step. – vittore Jul 03 '14 at 16:01

Angularjs: ng-repeat with ng-show input control creation failure

3 Answers3