javascript - 复杂 ASP.NET MVC 对象的 Angular JS 验证

Question

我正在尝试使用 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？ ('.' 分隔符可能会导致问题？)

Answer 1

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

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

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

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

现在一切正常。