Question

我是角色新手，只是在学习过程中。我正在尝试处理一些我遇到问题的小项目。我动态添加行。当我验证它时，验证此输入的所有先前索引，这些索引具有数据并且具有正确的格式以及当前空字段。我的问题是如果动态添加行，如何根据索引验证行。

HTML代码：下面的代码有三个必需的输入字段，单击按钮，添加行和删除行。

<form class="form-horizontal" role="form" method="post" ng-submit="createReferralCateogry()">
           <div class="form-group" ng-repeat="contactPerson in referral.contactPersons track by $index">
                    <div class="contactPerson">
                        <div class="col-sm-4 col-md-3">
                            <label for="contactperson ">Contact Person Name:</label>
                            <input type="text " class="form-control   " ng-model="referral.contactPersons[$index].personName " name="ConPersonName[$index]" placeholder="Contact Person" required>
                            <div class="validationmsg " ng-messages="addReferralForm.ConPersonName[$index].$error " ng-if="addReferralForm.ConPersonName[$index].$touched " role="alert ">
                                <div ng-message="required ">Please Enter Contact Person's Name</div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <label for="contactperson ">Contact Person Designation:</label>
                            <input type="text " class="form-control   " ng-model="referral.contactPersons[$index].designation " name="ConPersonDesig[$index]" placeholder="Designation " required>
                            <div class="validationmsg " ng-messages="addReferralForm.ConPersonDesig[$index].$error " ng-if="addReferralForm.ConPersonDesig[$index].$touched " role="alert ">
                                <div ng-message="required ">Please Enter Contact Person's Designation</div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <label for="contactperson]">Contact Person Mobile Number:</label>
                            <input type="number " class="form-control   " ng-model="referral.contactPersons[$index].mobileNumber" ng-minlength="10 " ng-maxlength="12 " name="ConPersonPH[$index]" placeholder="Mobile Number " required>
                            <div class="validationmsg " ng-messages="addReferralForm.ConPersonPH[$index].$error " ng-if="addReferralForm.ConPersonPH[$index].$touched " role="alert ">
                                <div ng-message="required ">Please Enter Contact Person's Mobile Number</div>
                                <div ng-message="minlength ">Your Mobile Number is too short</div>
                                <div ng-message="maxlength ">Your Mobile Number is too long</div>
                            </div>
                        </div>
                        <div class="col-sm-1 mtop25">
                            <label class="control-label"></label>
                            <button type="button" class="btn btn-primary glyphicon glyphicon-plus glyph_size addContactPerson " ng-class="$index==0? 'btn-primary glyphicon glyphicon-plus': 'btn-warning glyphicon glyphicon-minus' " aria-hidden="true " ng-click="addRemoveContactPerson($index) "></button>
                        </div>
                    </div>
                </div>
 </form>

JS：添加和删除联系人的javascript代码在此处完成。

$scope.addRemoveContactPerson = function(index) {
        if (index == 0) $scope.referral.contactPersons.push({
            personName: "",
            designation: "",
            mobileNumber: ""
        })
        else {
            $scope.referral.contactPersons.pop();
        }
    };

Answer 1

使用$ index命名动态控件时使用{{}}插值试试这个适用于我：

 <input type="text " class="form-control" ng-model="referral.contactPersons[$index].personName " name="{{'ConPersonName_'+$index}}" placeholder="Contact Person" required>
                        <div class="validationmsg " ng-messages="addReferralForm['ConPersonName_'+$index].$error " ng-if="addReferralForm['ConPersonName_'+$index].$touched " role="alert ">
                            <div ng-message="required ">Please Enter Contact Person's Name</div>
                        </div>

如何在Angular JS上验证动态字段？

1 个答案: