CODEWITHSUNDEEP
angularjsformsangularjs-ng-repeat
Ed Sinek
Ed Sinek

Reputation: 4987

angular ng-repeat creating multiple forms syntax error

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.

Upvotes: 0

Views: 349

Answers (3)

Moys&#233;s Lacerda
Moys&#233;s Lacerda

Reputation: 27

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>

Upvotes: 0

asgoth
asgoth

Reputation: 35829

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>
        ...

Upvotes: 1

Nicolas2bert
Nicolas2bert

Reputation: 1152

Use ngForm :

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

Upvotes: 1

Related Questions