Angularjs form vaidation

Question

I have a list of contacts on my page, each is displayed inside an <input> field (they're all inside a <form> element. When I click on a field and edit it, I want to have some validation - for example, if the field is not empty, I want to give this field a red BG and/or display a message below this exact field. So I tried this:

<form name="contactsForm" ng-submit="update()" novalidate>
    <tr class="row">
        <td colspan="2">
            <input type="text" class="form-control" placeholder="Search for contact" ng-model="filter.userSearch"/>
            <button class="btn btn-primary btn-sm btn-delete" ng-click="clearSearchField()"></button>
        </td>
        <td>
            <button class="btn btn-warning" ng-click="toggleNewContact()">Add User</button>
            <button type="submit" class="btn btn-danger">Update</button>
        </td>

    </tr>
    <tr class="row" ng-if="addNewContact" ng-repeat="new in newContacts">

        <td><input type="text" class="col-md-12 form-control" ng-model="new.en_name"></td>
        <td><input type="text" class="col-md-12 form-control" ng-model="new.email"></td>
        <td>
            <button ng-click="addMore()" class="btn btn-sm btn-success glyphicon glyphicon-plus"></button>
            <button ng-click="addLess(new)" class="btn btn-sm btn-danger glyphicon glyphicon-minus"></button>
        </td>
    </tr>
    <tr class="row" ng-repeat="contact in contactList | filter:filter.userSearch track by $index">
        <td class="form-group" ng-class="{ 'has-error' : contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine }">
            <input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="en_name" required>
            <p ng-show="contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine" class="help-block">Name in English is required.</p>
        </td>
        <td>
             <input type="text" class="col-md-12 form-control" ng-model="contact.email" name="{{contact.email}}" required>
        </td>
    </tr>
</form>

That didn't work, I didn't see any message. I also tried this:

<input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="{{contact.en_name}}" required>

But I didn't know how to connect this part name="{{contact.en_name}}" to this <p ng-show="contactsForm.en_name.$invalid && !contactsForm.en_name.$pristine".

I also tried using $index as name:

<td class="form-group" ng-class="{ 'has-error' : contactsForm.$index.$invalid && !contactsForm.$index.$pristine }">
    <input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="{{$index}}" required>
    <p ng-show="contactsForm.$index.$invalid && !contactsForm.$index.$pristine" class="help-block">Name in English is required.</p>
</td>

But that also didn't work - I didn't see any error message.

What am I doing wrong and how can I make it work?

In your first snippet just add required attribute to the input. — dfsq
– dfsq, Commented Mar 19, 2016 at 8:52
may I know why you want name attribute of input field based on ng-model value contact.en_name? — Pankaj Parkar
– Pankaj Parkar, Commented Mar 19, 2016 at 8:54
@dfsq But it has it... <input type="text" class="col-md-12 form-control" ng-model="contact.en_name" name="en_name" **required**> — Igal
– Igal, Commented Mar 19, 2016 at 8:57
@PankajParkar From what I read, I must have name attribute to make form validation, am I not? Any suggestions how to do it? — Igal
– Igal, Commented Mar 19, 2016 at 8:58

Pankaj Parkar · Accepted Answer · 2016-03-19 09:54:31Z

3

The problem is your all the input fields inside ng-repeat having same name attribute(so all were pointing to same name in form object), so somehow you need to make each name attribute to be unique. You could use $index to make it unique.

Markup

<td class="form-group" ng-class="{ 'has-error' : contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine }">
   <input type="text" class="col-md-12 form-control" 
     ng-model="contact.en_name" ng-attr-name="{{'en_name'+$index}}" required>
   <p ng-show="contactsForm['en_name'+$index].$invalid && !contactsForm['en_name'+$index].$pristine" 
    class="help-block">
      Name in English is required.
    </p>
</td>

edited Mar 19, 2016 at 9:54

answered Mar 19, 2016 at 9:04

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Igal Over a year ago

Tried it, but unfortunately it still didn't work. I tried to change the name to name="en_name_{{$index}}" and then validation to

<p ng-show="contactsForm['en_name_'+$index].$invalid && !contactsForm['en_name_'+$index].$pristine"                                class="help-block">

, but still no error message.

Igal Over a year ago

Tried it, still nothing. BTW, when I look at code inspector, that's what I see: ng-attr-name="{{'en_name'+$index}}", without the actual index number.

Pankaj Parkar Over a year ago

@Igal could you give me plunkr so that I can dig into it..though I'm sure above should work..

Igal Over a year ago

OK, I was working on the plunkr, and then I noticed a mistake that I had - my <form> element was defined in incorrect place, should've been before the <table> element. So I changed that, tried it with the name I mentioned previously name="en_name_{{$index}}" and validation I mentioned on the same reply <p ng-show="contactsForm['en_name_'+$index].$invalid && !contactsForm['en_name_'+$index].$pristine" class="help-block"> and... it finally worked!!! Thank you very much! :)

Pankaj Parkar Over a year ago

@Igal glad to know that.. Thanks :-)

Collectives™ on Stack Overflow

Angularjs form vaidation

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related