0

Edit:

As demonstrated in the plunker by Wayne Ellery, the second code sample does actually work. The error was somewhere else in the page.

http://plnkr.co/edit/rtmwOzhiWn0695OGwS9b?p=preview

Original

I'm trying to disable the 'submit' button on a form using AngularJS, however I run into trouble if the form is inside an ng-repeat.

This following code works fine:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

however this doesn't, even if there's only one item in the array:

<div ng-repeat="item in data.Items">
    <form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required />
        <button ng-disabled="myForm.$invalid">Save</button>
    </form>
<div>

Presumably this is because the name of the form is somehow altered by the repeat. I saw a post which suggest adding {{$index}} to the form name

AngularJs dynamic name for a form inside ng-repeat

But if I do this I'm not sure how to then access the form name within the ng-disabled tag - obviously this won't work:

<div ng-repeat="item in data.items" ng-init="formName = 'myForm' + $index">
    <form name="{{formName}}">
        <input name="myText" type="text" ng-model="mytext" required />
        <button ng-disabled="{{formName}}.$invalid">Save</button>
    </form>
</div>

How do I access the correct form to check the validation of the current form?

Community
  • 1
  • 1
Kaine
  • 1,285
  • 2
  • 16
  • 30
  • `name="{{formName}}"` set attribute name using interpolation will not work – Pankaj Parkar Feb 03 '15 at 12:17
  • 1
    Do like this inside your ng-repeat `
    `     – Pankaj Parkar Feb 03 '15 at 12:18
  • @pankajparkar - The second example in the question is as you describe, however this doesn't work. Can you clarify? – Kaine Feb 03 '15 at 12:22
  • 1
    The second code block is working when I tried it: [Plunkr](http://plnkr.co/edit/rtmwOzhiWn0695OGwS9b?p=preview) – Wayne Ellery Feb 03 '15 at 12:22
  • @WayneEllery Thanks for the Plunkr - there must be something else odd going on on the page I'm working on because if I copy that working example into my existing ng-repeat it stops working. – Kaine Feb 03 '15 at 12:42
  • It could be a bug in the version of Angularjs you are using. What version are you using? – Wayne Ellery Feb 03 '15 at 12:44
  • I'm using v1.2.17 - I tried changing the plunkr to use the same version, and that didn't seem to reproduce the issue. The actual page is quite complex, so it's possible I've nested something in a silly way that's causing an issue - I'll do a few tests and try to clarify the cause – Kaine Feb 03 '15 at 12:48

1 Answers1

0

I'm not sure what the error in my code actually was, but after deleting the ng-repeat and then re-typing the whole thing it now just works as expected, so I'll put an answer here for clarity.

As pointed out by pankajparkar and WayneEllery in the comments, the correct syntax for accessing $valid inside an ng-repeat is simply:

<div ng-repeat="item in data.Items">
    <form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required />
        <button ng-disabled="myForm.$invalid">Save</button>
    </form>
<div>
Kaine
  • 1,285
  • 2
  • 16
  • 30