UPDATE. Never mind, it's working fine with the correct name of the form. It didn't work before for some reason, though.


Hi everybody,

We're using bootstrap tabs and here is the markup I have:

<div class="widget-content">
                <div class="scrollable widget-resize">
                    <div class="padd">
                        @Html.Partial("_EditFormAlerts")
                    </div>
                    <div class="col-lg-3 col-md-3 panel-container">
                        <ul class="nav nav-pills nav-stacked">
                            <li class="active"><a data-toggle="pill" href="#paymentTotals" ng-class="{true: 'invalid-tab', false: ''}[form.editPaymentTotals.paymentInfoForm.$invalid]">@Labels.paymentTotals</a></li>
                            <li><a data-toggle="pill" href="#ticketsVouchers" ng-class="{true: 'invalid-tab', false: ''}[form.rangeValidationForm1.$invalid]">@Labels.ticketsVouchers</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-9 col-md-9 panel-container">
                        <div class="tab-content">
                            <div class="tab-pane active" id="paymentTotals">
                                @Html.Partial("EditPaymentTotals")
                            </div>
                            <div class="tab-pane" id="ticketsVouchers">
                                @Html.Partial("EditTicketsVouchers")
                            </div>
                        </div>
                    </div>
                </div>
            </div>

My problem is that I can not make my second tab to show in red as invalid when it's invalid. I'm attaching the picture of what I see when I inspect this tab in the Dev. Tools.

My page markup for the tab looks like this:

<div class="form-horizontal" ng-show="!currentCloseout.isFinalized || closeoutEditMode">

    <div class="form-group">

        <label class="control-label" title="@Labels.tickets #1">@Labels.tickets #1</label>
        <div ng-repeat="n in [1,2,3]" ng-form="rangeValidationForm1">
            <data-sm:integer-range label-title="{{'@Labels.roll' + ' #'  + n}}" form-name="rangeValidationForm1"
                                   start-obj="currentCloseout['tkt1Start' + n]" end-obj="currentCloseout['tkt1End' + n]"></data-sm:integer-range>
        </div>
    </div>

    <div class="form-group">

        <label class="control-label" title="@Labels.tickets #2">@Labels.tickets #2</label>
        <div ng-repeat="n in [1,2,3]" ng-form="rangeValidationForm2">
            <data-sm:integer-range label-title="{{'@Labels.roll' + ' #'  + n}}" form-name="rangeValidationForm2"
                                   start-obj="currentCloseout['tkt2Start' + n]" end-obj="currentCloseout['tkt2End' + n]"></data-sm:integer-range>
        </div>
    </div>

    <div class="form-group">

        <label class="control-label" title="@String.Format(Labels.voucherX, "#1")">@String.Format(Labels.voucherX, "#1")</label>
        <div ng-repeat="n in [1,2,3]" ng-form="rangeValidationForm3">
            <data-sm:integer-range label-title="{{'@Labels.roll' + ' #'  + n}}" form-name="rangeValidationForm3"
                                   start-obj="currentCloseout['vch1Start' + n]" end-obj="currentCloseout['vch1End' + n]"></data-sm:integer-range>
        </div>
    </div>

    <div class="form-group">

        <label class="control-label" title="@String.Format(Labels.voucherX, "#2")">@String.Format(Labels.voucherX, "#2")</label>
        <div ng-repeat="n in [1,2,3]" ng-form="rangeValidationForm4">
            <data-sm:integer-range label-title="{{'@Labels.roll' + ' #'  + n}}" form-name="rangeValidationForm4"
                                   start-obj="currentCloseout['vch2Start' + n]" end-obj="currentCloseout['vch2End' + n]"></data-sm:integer-range>
        </div>
    </div>
</div>

So, I'm using ng-repeat and the ng-form.

Can you please help me with the expression for invalid class?

Thanks in advance.