复杂 ASP.NET MVC 对象的 Angular JS 验证答案

【问题标题】：Angular JS Validation of complex ASP.NET MVC object复杂 ASP.NET MVC 对象的 Angular JS 验证
【发布时间】：2014-11-12 21:46:47
【问题描述】：

我正在尝试使用 AngularJS 在子表单中验证我的模型，但没有显示错误消息，并且按钮始终处于禁用状态。

<form novalidate>

    ... Some other form fields

    <ng-form name="SearchPostcodeForm">
        <div class="partial-search-postcode-service form-horizontal">
            <div class="form-group">
                <label
                    class="control-label col-md-2"
                    for="CustomerAddressDetails_CurrentAddress_SearchPostcode">
                    Post code
                </label>
                <div class="col-sm-6 col-xs-10">
                    <input
                        id="CustomerAddressDetails_CurrentAddress_SearchPostcode"
                        name="CustomerAddressDetails.CurrentAddress.SearchPostcode"
                        ng-model="CustomerAddress.CurrentAddress.SearchPostcode"
                        required="required" type="text" >
                    <small ng-show="SearchPostcodeForm.CustomerAddress_CurrentAddress_SearchPostcode.$error.required">
                        Your postcode is required.
                    </small>
                </div>
            </div>
            <input type="submit" value="Find your address"
                name="action:Current_SearchPostcode"
                data-val-valgroup-name="SearchPostcode"
                class="btn btn-primary causesvalidation"
                ng-click="seachPostcode($event, 'Current');"
                ng-disabled="SearchPostcodeForm.$invalid"
                disabled="disabled">
        </div>
    </ng-form>

    ... Some other form fields

</form>

修改 SearchPostCode 中的值确实会更新类，因此验证本身似乎正在发生。

例如：

<ng-form name="SearchPostcodeForm" novalidate="" class="ng-pristine ng-invalid ng-invalid-required">

变成：

<ng-form name="SearchPostcodeForm" novalidate="" class="ng-dirty ng-valid ng-valid-required">

但错误消息永远不会显示，按钮也永远不会启用。

我在这里缺少什么？这是表单字段的真正长名称的问题吗？还是我应该使用 id？（'.' 分隔符可能会导致问题？）

【问题讨论】：

标签： javascript asp.net asp.net-mvc angularjs asp.net-mvc-4

【解决方案1】：

在这里重新阅读后...我已经指向 id 而不是名称（显然这是错误的）。

此外，因为我的表单名称有“。”分隔符，我需要稍微不同地访问它。

<small
    ng-show="SearchPostcodeForm['CustomerAddressDetails.CurrentAddress.SearchPostcode'].$error.required">
    Your postcode is required.
</small>

工作示例： http://plnkr.co/edit/cgUlYEGubYcfDh80YqsI

现在一切正常。

【讨论】：