ng-repeat-generated form fields not submitting on HTML post

Question

Using Yii, I have a form for creating an instance of a model. I'm submitting the form via a vanilla HTML POST rather than ng-submit. I currently have:

<form>
...
<div ng-repeat="category in dashboard.allCategories" class="category-radio-wrap" ng-model="dashboard.category">
    <input id="radio-cat-{{category.id}}" type="radio" name="Activities[category]" value="{{category.id}}">
    <label for="radio-cat-{{category.id}}">
        <div class="color-spot" style="background-color:{{category.color}};border-color:{{darken(category.color)}}"></div>
        <span class="label-text">{{category.title}}</span>
    </label>
</div>
...
</form>

But when I submit the form, these radio buttons aren't posted. All of my other fields, not generated via Angular, are. Furthermore, if I switch this out for a PHP for-loop, like so:

$cats = \app\models\Categories::find()->all();
foreach($cats as $cat) {
    echo '<div class="category-radio-wrap">';
    echo '<input id="radio-cat-'.$cat->id.'" type="radio" name="Activities[category]" value="'.$cat->id.'">';
    echo '<label for="radio-cat-'.$cat->id.'">
        <div class="color-spot" style="background-color:'.$cat->color.';border-color:'.$cat->color.';"></div>
        <span class="label-text">'.$cat->title.'</span>
    </label></div>';
}

...they post just fine. I could do this, but since I have to make the request for the JS array as it stands, it would be nice to use that instead of running another query, not to mention I lose my border-darkening JS function going the PHP route as well. Any thoughts on why these aren't submitting and how to resolve it?

At first glance it doesn't look like those two would output the same HTML. Can you confirm that? — Phix, Oct 20 '14 at 20:16
What is with the extra brackets at the end of `name="Activities[category][]"`? — Brett, Oct 20 '14 at 20:20
Yep, my PHP solution wasn't quite right. I've updated it to match and can confirm that it still submits just fine while the Angular solution does not. — Ethan C, Oct 20 '14 at 20:21
That bracket was from testing it as a series of checkboxes to see if it was specific to radio buttons. I've removed them. — Ethan C, Oct 20 '14 at 20:21

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Try wrapping them in ng-form. That's the simple solution for this known problem. Other solutions are using ngModelController. That's cool, but the learning curve is higher.

You'll find many related resources on the web: here's a local one: Angular ng-repeat with ng-form, accessing validation in controller

edited May 23 '17 at 12:05

Community

1
1

answered Oct 20 '14 at 20:21

oori

5,533
1
30
37

Since I'm doing a vanilla HTTP POST, this shouldn't have any effect, but it did get me looking at my `form` tags and noticed it was getting cut off before the end of the page. See my answer. – Ethan C Oct 20 '14 at 20:27

score 0 · Answer 2 · answered Oct 20 '14 at 20:30

Looking into @oori's answer, I noticed that the PHP opening the form tags was inside a <div class="row"><div class="col-md-6"> and when I ended that row, it killed the rest of the form. While there were other fields also outside the form tags, they posted just fine, and the PHP version still posted okay as well, so that still baffles me, but getting all my elements wrapped did solve the issue. Thanks for those who looked.

ng-repeat-generated form fields not submitting on HTML post

2 Answers2