Why HTML5 field validation doesn't work in ng repeat?

Question

i am trying to solve this problem for some time but without luck. I am reading whole afternoon examples like this or this about validation inside ng-repeat but i am not able to find anything that would explain to me the reason why my code doesn't work.

I have form with fields inside ng-repeat and all of them use required parameter for example .

When i trigger update button the validation is not working. If i have the same form without ng-repeat, the validation pop-ups show up normally(if something doesn't match the input criteria). I have used this code:

ng-click="contactForm.$valid && updateContact(contact)"

The code above doesn't seem to have effect on the form with ng-repeat. If possible, i would like get HTML 5 validation pop-up:

on the filed that is empty(or if regex doesn't match with the input) when i press the update button. I don't want to have fields that say required or to disable the update button because some field is not correct.

Plunker

score 1 · Answer 1 · answered Feb 02 '17 at 20:32

1

Drop the ng-form="contactForm" from <div> and wrap that ng-repeat="con in contact" inside <form name="contactForm"></form> element.

And for your update button, you might want to add ng-disabled="contactForm.$invalid".

answered Feb 02 '17 at 20:32

Mikko Viitala

8,344
4
37
62

1

input should have `name` atttribute too ;) – AlainIb Feb 02 '17 at 20:38
i was updating the plunkr with same think that you advice but stil have empty "contactForm.$error" : https://plnkr.co/edit/oVfvkoXgltebHQTyelev?p=preview – AlainIb Feb 02 '17 at 20:40
1

@Mikko Viitala Thank you for fast response and help, i am interested can you achieve the option to have HTML5 required pop-up's pointing to the field? If not, the solution that you have provided would be just fine. But i wanted to have maybe a better visual style. Anyway i have up-voted for you both. Thank you. – Basic Guy Feb 02 '17 at 20:58

AlainIb · Answer 2 · 2017-02-02T21:13:52.870

as Mikko says + add "name" attribut for each input:

https://plnkr.co/edit/oVfvkoXgltebHQTyelev?p=preview

    <!DOCTYPE html>
    <html>

    <head>
        <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
        <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
        <link rel="stylesheet" href="style.css"/>
        <script src="script.js"></script>
    </head>

    <body ng-app="app" ng-controller="Ctrl">


    <div ng-init=" editContact(); getAllCities(); getAllCountries();" class="container">
        <div class="btn-group btn-group-justified">
            <div class="pull-left">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary" ng-click="goContacts()">Contacts</button>
                </div>
            </div>

        </div>
        <div></div>
        <form name="contactForm">
            <div ng-repeat="con in contact">
                <div ng-if="$index == 0">

                    <div hidden>
                        <input type="text" placeholder="First name" name="firstname" ng-model="con.id" required>
                    </div>

                    <div>
                        <label class="lbl"><b>First name</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="First name" name="firstname" ng-model="con.first_name" required>
                    </div>

                    <div>
                        <label class="lbl"><b>Last name</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="Last name" name="lastname" ng-model="con.last_name" required>
                    </div>

                    <div>
                        <label class="lbl"><b>Phone</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="Phone" name="phone" ng-model="con.phone" required>
                    </div>

                    <div>
                        <label class="lbl"><b>Email</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="Email" name="email" ng-model="con.email" required>
                    </div>

                </div>


                <div ng-if="$index == 1">

                    <div>
                        <label class="lbl"><b>Street name</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="Street name" name="streetname"  ng-model="con.street" required>
                    </div>


                    <div>
                        <label class="lbl"><b>Street number</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="Street number" name="streetnumber" ng-model="con.street_no" required>
                    </div>

                </div>

                <div ng-if="$index == 2">
                    <div>
                        <label class="lbl"><b>City id </b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="City id" name="cityd" ng-model="con.id" required>
                    </div>

                    <div>
                        <label class="lbl"><b>Zip code</b></label>
                    </div>
                    <div>
                        <input type="text" placeholder="Street number" name="citystreet" ng-model="con.zip_code" required>
                    </div>
                </div>
            </div>


            <div class="container1">
                <label class="lbl"><b>Select city</b></label>

                <select id="City" name="City" class="form-control" ng-model="selectedValue1">
                    <option ng-repeat="city in chooseCities" value="{{city.id}} ">
                        {{city.name}}
                    </option>
                </select>

            </div>

            <div class="container1">
                <label class="lbl"><b>Select country</b></label>

                <select id="Country" name="Country" class="form-control" ng-model="selectedValue2">
                    <option ng-repeat="country in chooseCountries" value="{{country.id}}">

                        {{country.name}}
                    </option>
                </select>

            </div>
        </form>
    </div>

    <div class="container1" style="background-color:rgb(241, 241, 241)">
        <button type="submit" class=" colorbtn cancelbtn colorbtn" ng-disable="!contactForm.$valid" ng-disabled="!contactForm.$valid" ng-click="updateContact(contact)">Update Contact</button>
        <button type="button" class="cancelbtn" ng-click="deleteContact(contact)">Delete Contact</button>
    </div>



    </body>

    </html>

If you want to display a message next an empty imput

            <div>
                <input type="text" placeholder="First name" name="firstname" ng-model="con.first_name" required>
                <span ng-show="contactForm.firstname.$dirty && contactForm.firstname.$error.required" class="help-block">first name required</span>
            </div>

            <div>
                <label class="lbl"><b>Last name</b></label>
            </div>
            <div>
                <input type="text" placeholder="Last name" name="lastname" ng-model="con.last_name" required>
                <span ng-show="contactForm.lastname.$dirty && contactForm.lastname.$error.required" class="help-block">last name required</span>
            </div>

That is a nice working example and i want to thank you for the help but is there a way like i mentioned to have pop-up which is pointing to the filed that is empty? — Basic Guy, Feb 02 '17 at 20:46
i edited the plunkr. try to empty first name or last name, a message will be displayed — AlainIb, Feb 02 '17 at 21:14
thank you, what i wanted to achieve (if you read my question again) is the same pop up that appears when we use required parameter on html5 input. That was my goal. Check this new plunker to understand better what i wanted to have on ng repeat fields: https://plnkr.co/edit/G8MpP4T9vqFUQcUreF0l?p=preview The implementation that you provided is certainly doing the job :) — Basic Guy, Feb 02 '17 at 22:16

Why HTML5 field validation doesn't work in ng repeat?

2 Answers2