angular ng-repeat creating multiple forms syntax error

Question

I'm ng-repeating over a collection of items, and each item I want to have its own form and its own submit button, which will send that form info to the submit function. I needed to know which item is being submitted, so I figured I'd create one form per item and that would indicate which one is being submitted. Currently, it's in an li ng-repeat like so:

<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
    <li ng-repeat="item in selRole.selectRoles | multifilter:query">
        <form name="selRoleForm-{{item.rowId}}" ng-submit="selRole.selectRole(selRoleForm-{{item.rowId}})" novalidate>
            <div class="card">
                <p>Card Name: {{item.cardName}}</p>
                <p>.. other form elements here ..</p>
                <p><button type="submit">Select</button></p>
            </div>
        </form>
    </li>
</ul>

I'm getting the following error:

[$parse:syntax] Syntax Error: Token '{' invalid key at column 33 of the expression [selRole.selectRole(selRoleForm-{{item.rowId}})] starting at [{item.rowId}})].

What am I doing incorrectly - or is there a better way to approach this problem?

This SO post is the closest that I could find to my problem, but still, I'm not sure I understand how to adjust to my specific needs.

Do not include solution to question please (post a separate answer instead). — user4157124
– user4157124, Commented Dec 28, 2024 at 21:13

asgoth · Accepted Answer · 2015-10-08 17:28:14Z

1

Just store the form name in your ng-repeated array:

<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
    <li ng-repeat="item in selRole.selectRoles | multifilter:query">
        <form name="{{item.formName}}" ng-submit="selRole.selectRole(item.formName)" novalidate>
        ...

answered Oct 8, 2015 at 17:28

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ed Sinek Over a year ago

This fixed the syntax error, which pointed me in the right direction. This allowed me to see the real problem, which was not passing the correct object in the ng-submit function. Added update to question with solution.

Nicolas2bert · Accepted Answer · 2015-10-08 17:27:46Z

1

Use ngForm :

<div class="form-group" ng-repeat="item in selRole.selectRoles | multifilter:query">
  <ng-form name="userFieldForm">
    <label></label>
    <input >
  </ng-form>
  </div>

answered Oct 8, 2015 at 17:27

Nicolas2bert

1,1527 silver badges10 bronze badges

Comments

Moysés Lacerda · Accepted Answer · 2015-10-08 17:49:21Z

0

You just need to reverse the conversion in the concatenation of the names. When parsing a parameter on ng-submit what you need to convert is the hard-coded string, not the rowId.

would be something like that:

<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
<li ng-repeat="item in selRole.selectRoles | multifilter:query">
    <form name="selRoleForm-{{item.rowId}}" ng-submit="selRole.selectRole('selRoleForm-'+item.rowId)" novalidate>
        <div class="card">
            <p>Card Name: {{item.cardName}}</p>
            <p>.. other form elements here ..</p>
            <p><button type="submit">Select</button></p>
        </div>
    </form>
</li>

answered Oct 8, 2015 at 17:49

Moysés Lacerda

253 bronze badges

Collectives™ on Stack Overflow

angular ng-repeat creating multiple forms syntax error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related