angular 在 ng-repeat 中验证

Question

我在 ng-repeat 中对我的文本框进行了以下验证

<div class="col-md-6 col-lg-2">
    <div class="form-group">
        <label for="Country{{$index}}" class="control-label required">Country</label>
        <div class="input-group">
            <mc-lookup-dropdown data-lookup-name="CountryType" required data-model="ContactAddress.Country" id="Country{{$index}}" name="Country{{$index}}" class="form-control"></mc-lookup-dropdown>
        </div>
        <div data-ng-messages="memberDemographics.demographics.$error" class="validation-errors">
            <div data-ng-message="Country">{{ ContactAddress.$serverErrors.Country }}</div></div>
        <div data-ng-messages="demographicsForm.{{'Country'+$index}}.$error" class="validation-errors">
            <div data-ng-message="required" data-ng-show="!demographicsForm.{{'Country'+$index}}.$pristine">This Field is Required</div>
        </div>
    </div>
</div>

页面加载时抛出以下错误“错误：[$parse:syntax]

http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%7B&p1=is%20not%20a%20validNaNdentifier&p2=18&p3=demographicsForm.%7B%7B'PhoneNumber'%2B%index%7D%7D.%24error&p4=%7B%7B'PhoneNumber'%2B%index%7D%7D.%24error"

我需要在 ng-message 中包含表达式 with 因为文本名称取决于 ng-repeat 循环的 $index..

Answer 1

这些行有错误：

<div data-ng-messages="demographicsForm.{{'Country'+$index}}.$error" class="validation-errors">
<div data-ng-message="required" data-ng-show="!demographicsForm.{{'Country'+$index}}.$pristine">This Field is Required</div>

将其更改为：

<div data-ng-messages="demographicsForm['Country' + $index].$error" class="validation-errors">
<div data-ng-message="required" data-ng-show="!demographicsForm['Country'+$index].$pristine">This Field is Required</div>

来自this篇文章

您只需要在使用 Angular 的模板系统时用大括号括起来 - 大括号告诉 Angular 替换值。在这种情况下，data-ng-message 的值是正在计算的表达式。

Answer 2

通过将 html 更改为

<div data-ng-messages="demographicsForm['Country'+$index].$error" class="validation-errors">
                                                    <div data-ng-message="required" data-ng-show="!demographicsForm['Country'+$index].$pristine">This Field is Required</div>
</div>

谢谢你

angular 在 ng-repeat 中验证

angular validation within ng-repeat

validation

angularjs

ng-messages