为什么HTML5字段验证在ng重复中不起作用?

时间:2017-02-02 20:21:58

标签: angularjs html5 validation required

我试图解决这个问题一段时间但没有运气。我正在阅读整个下午的例子,如thisthis关于ng-repeat中的验证,但我找不到任何可以解释我的代码无效的原因。

我的表格包含ng-repeat中的字段,所有这些字段都使用必需的参数。

当我触发更新按钮时,验证无效。如果我有没有 ng-repeat 的相同表单,则验证弹出窗口会正常显示(如果某些内容与输入条件不匹配)。我使用过这段代码:

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

上面的代码似乎对使用ng-repeat的表单没有影响。 如果可能,我想获得HTML 5验证pop-up

当我按下更新按钮时,

在空的字段上(或者如果正则表达式与输入不匹配)。我不想让字段说明需要或禁用更新按钮,因为某些字段不正确。

Plunker

2 个答案:

答案 0 :(得分:1)

ng-form="contactForm"删除<div>并将ng-repeat="con in contact"包裹在<form name="contactForm"></form>元素中。

对于您的更新按钮,您可能想要添加ng-disabled="contactForm.$invalid"

答案 1 :(得分:1)

正如米克科所说+添加&#34;名称&#34;每项意见的归属:

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>

如果您想在空的输入旁边显示消息

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