AngularJS inner form validation

Question

I have an ng-repeat to iterate over form fields.

The problem is, if I have an invalid form I don't get any feedback. I don't see the span, nor do I see has-error get applied to the div.

I must be missing something simple, can anyone see what it is?

Here's the ng-repeat code:

<div ng-repeat="i in items">
    <ng-form novalidate class="user-form" name="userForm">
        <div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
            <label class="control-label">{[{ i.item }]}</label>
            <input-field item="i"></input-field>
            <span ng-show="userForm.userInput.$invalid">TEST</span>
        </div>
    </ng-form>
</div>

Which generates an entry like this:

    <div ng-repeat="i in items">
        <ng-form novalidate="" class="user-form" name="userForm">
            <div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
                <label class="control-label">Username</label>
                <input name="userInput" class="form-control" type="text" ng-model="item.answer" placeholder="Username" required>
                <span ng-show="userForm.userInput.$invalid" class="ng-hide">TEST</span>
            </div>
        </ng-form>
    </div>

Lewis Hai · Accepted Answer · 2015-10-13 02:26:33Z

0

You want create more than one "userForm"? If not you can change it to

  <ng-form novalidate class="user-form" name="userForm"> <div ng-repeat="i in items">
    <div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
        <label class="control-label">{[{ i.item }]}</label>
        <input-field item="i"></input-field>
        <span ng-show="userForm.userInput.$invalid">TEST</span>
    </div> </div>
</ng-form>

Hope it helps.

answered Oct 13, 2015 at 2:26

Lewis Hai

1,21411 silver badges23 bronze badges

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

4 Comments

b85411 Over a year ago

Yeah I need multiple userForm's - my understanding was that Angular validation works on form names; hence why I need to have multiple forms.

Lewis Hai Over a year ago

The "userForm" should dynamid name right? name="userForm" shoud change to name="{{}}"

Claies Over a year ago

@b85411 yes, Angular validation works by referencing form names, however in your case, you are creating a form for every control, which doesn't seem like it would normally make sense.

b85411 Over a year ago

@Claies I was following the lead from stackoverflow.com/a/19860312/2884981

Collectives™ on Stack Overflow

AngularJS inner form validation

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related