Angular JS Validation of complex ASP.NET MVC object

Question

I'm trying to validate my model within a subform using AngularJS, but the error message isn't showing up, and the button is always disabled.

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

Modifying values in the SearchPostCode does update classes, so the validation itself appears to be happening.

For example:

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

Becomes:

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

But the error message never gets displayed, and the button never enabled.

What am I missing here? Is this a problem with the really long names for the form field? Or should I be using the id? (where the '.' separators may be causing the problem?)

Kevin Blake · Accepted Answer · 2014-09-18 14:23:07Z

1

After re-reading it here... I'm already pointing at the id instead of the name (which is wrong, obviously).

Furthermore, because my form name has the '.' separators in it, I needed to access it slightly differently.

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

Working example: http://plnkr.co/edit/cgUlYEGubYcfDh80YqsI

Now everything is working as it should.

answered Sep 18, 2014 at 14:23

Kevin Blake

4443 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS Validation of complex ASP.NET MVC object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related