0

I have following code:

<form name="reviewForm_{{$index}}" ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>
            <blockquote class="newReview">
                <b>Stars {{reviewCtrl.review.stars}}</b>
                <p>{{reviewCtrl.review.comment}}</p>
                <cite>{{reviewCtrl.review.author}}</cite>
            </blockquote>
            <select class="form-control" ng-model="reviewCtrl.review.stars">
                <option value="1">1 star</option>
                <option value="1">2 stars</option>
                <option value="1">3 stars</option>
                <option value="1">4 stars</option>
                <option value="1">5 stars</option>
            </select><br />
            <textarea ng-model="reviewCtrl.review.comment" required></textarea>
            <label>by:</label>
            <input type="text" ng-model="reviewCtrl.review.author" required /><br />

            <div>reviewForm is {{reviewForm_$index.$valid}}</div>

            <input class="btn btn-primary btn-large" type="submit" value="Submit" />
        </form>

The Form above lies within a ng-repeat and has the name reviewForm_$index. That works fine. So it will give reviewForm_0, reviewForm_1 and so on.

Now I would like to check if the form is valid with {{reviewForm_$index_$valid}}. For some reason it doesn't show anything. Do I have the wrong syntax?

7
  • Fairly certain the reviewform_$index_$value should be reviewform_$index.$valid but I can't check right now.
    – Jhecht
    Jan 25, 2015 at 20:06
  • You have to use quotes since reviewForm is just a string and $index is an actual model in your scope. Jan 25, 2015 at 20:08
  • Oh, my mistake, the second underscore should be a dot. But that's what i've tried. Doesnt work.
    – KiwiJuicer
    Jan 25, 2015 at 20:08
  • What do you expect it to be (with or without the dot)?
    – Shomz
    Jan 25, 2015 at 20:09
  • Can you show your controller? Would make the question a bit more clear. Jan 25, 2015 at 20:12

2 Answers 2

0

Actually you are trying to access a property that does not exists since reviewform_$index will be treated as a form name not a variable. So change your code to something like this:

<div>reviewForm is {{reviewCtrl['reviewForm_' + $index].$valid}}</div>

That will work!!

3
  • Can you please provide a plunkr or so? Jan 25, 2015 at 20:49
  • Hope this works, bit messy. Click on one of the links called Reviews. plnkr.co/edit/vX0LnjndPyTG1m39r3gf
    – KiwiJuicer
    Jan 25, 2015 at 20:54
  • 1
    @Kiwi Juicer because ng-repeat creates a new scope, each form name will be on a different scope, so you could in principle use the same name. See demo: plnkr.co/edit/RRf1KuGPCb7ptZbyNi93?p=preview But I would try to avoid the form nested in ng-repeat as it looks like overly complicated.
    – klode
    Jan 25, 2015 at 21:45
0

Ok, I got it to work thanks to @klode. Here my solution:

        <form name="reviewForm" ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>
            <blockquote class="newReview">
                <b>Stars {{reviewCtrl.review.stars}}</b>
                <p>{{reviewCtrl.review.comment}}</p>
                <cite>{{reviewCtrl.review.author}}</cite>
            </blockquote>
            <select class="form-control" ng-model="reviewCtrl.review.stars">
                <option value="1">1 star</option>
                <option value="2">2 stars</option>
                <option value="3">3 stars</option>
                <option value="4">4 stars</option>
                <option value="5">5 stars</option>
            </select><br />
            <textarea ng-model="reviewCtrl.review.comment" required></textarea>
            <label>by:</label>
            <input type="text" ng-model="reviewCtrl.review.author" required /><br />

            <div>reviewForm is {{reviewForm.$valid}}</div>

            <input class="btn btn-primary btn-large" type="submit" value="Submit" />
        </form>

As explained by Klode can I leave the form name without the $index trailer and address the form's $valid property each loop via it's name just so: reviewForm.$valid

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.