Simple Angular Form Validation Not Working

Question

I have a simple Angular form here:

<form class="form-horizontal" role="form" name="alertForm">

    <div class="form-group">
        <label for="cautionMultiplier" class="col-sm-2 control-label">Yellow Multiplier</label>
        <div class="col-sm-5">
            <input type="number" min="1" class="form-control" ng-model="alert.cautionMultiplier" id="cautionMultiplier" name="cautionMultiplier" placeholder="Ex. 2" integer required />
            <span>{{alertForm}}</span>
            <span class="alert alert-danger help-block" ng-show="alertForm.cautionMultiplier.$error.number && alertForm.amount.$dirty">
                                    The value is not a valid integer
                                </span>
            <span class="alert alert-danger help-block" ng-show="alertForm.cautionMultiplier.$error.min ">
                                    The value must be at least 1 and an integer
                                </span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2">
            <button type="submit" class="btn btn-primary pull-right" ng-click="addAlert(form)" ng-disabled="alertForm.$invalid">
                Save
            </button>
        </div>
    </div>
</form>

When I enter any non integer (ie 'a') into the cautionMultiplier box, the validation message The value is not a valid integer does not trigger.

What am I doing wrong?

Answer 1

You're displaying this error message only if there is an error for the key "required":

ng-show="alertForm.cautionMultiplier.$error.required && alertForm.amount.$dirty"

Replace required by number.

Answer 2

Fixed

My problem was that: alertForm.amount.$dirty should have been alertForm.cautionMultiplier.$dirty