UPDATE. Solved this problem by not setting values to 0 initially and also adding ng-show on the control level as well.

Hi everybody,

I have the following controls

    <div class="controls" ng-show="feeObject.feeType===0">
                <label class="control-label col-md-2" title="Flat Rate">@Labels.flatRate:</label>

                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon">@Labels.currencySymbol</span>
                        <input type="number" name="flatRate"
                               id="flatRate"
                               ng-model="feeObject.flatRate"
                               class="form-control"
                               min="0.01"
                               placeholder="15.00"
                               data-sm:number
                               data-sm:number-format
                               data-accuracy="2" />
                        <div class="field-validation-error">
                            <span ng-show="form.applyFees.flatRate.$error.min  && form.applyFees.flatRate.$dirty">
                                @String.Format(Messages.mustBeGreaterThanOrEqualTo, Labels.flatRate, "0.01")
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="controls" ng-show="feeObject.feeType===1">
                <label class="control-label col-md-2" title="Percentage">@Labels.percentage:</label>

                <div class="col-md-4">
                   
                        <input type="number" name="percentage"
                               id="percentage"
                               ng-model="feeObject.percentage"
                               class="form-control"
                               min="0.0001"
                               max="100"
                               placeholder="2.5000"
                               data-sm:number
                               data-sm:number-format
                               data-accuracy="4" />
                        <div class="field-validation-error">
                            <span ng-show="form.applyFees.percentage.$error.min && form.applyFees.percentage.$dirty">
                                @String.Format(Messages.mustBeGreaterThanOrEqualTo, Labels.percentage, "0.0001")
                            </span>
                            <span ng-show="form.applyFees.percentage.$error.max && form.applyFees.percentage.$dirty">
                                @String.Format(Messages.mustBeLessThanOrEqualTo, Labels.percentage, "100")
                            </span>
                        </div>                    
                </div>
            </div>

In the controller I defined flatFee and percentage as 0. I found that when I open the form it shows that tab as invalid right from the start. Even when none of these controls should be shown (feeType is not 0 or 1), I still have the tab shown as invalid.

Does it mean I can not use min/max HTML5 attributes at all? What will be a solution here?

Thanks in advance.