CODEWITHSUNDEEP
angularjs
vishnu
vishnu

Reputation: 4599

AngularJS selectbox validation with ng-messges

I am doing selectbox validation using ng-messages, but I am not able to do the required validation.

What could be the problem with my code?

<form name="personalDetailForm" novalidate="">
    <label class="item item-input" ng-class="{ 'has-errors' : personalDetailForm.title.$invalid, 'no-errors' : personalDetailForm.title.$valid}">
        <span class="input-label">Title:</span>
        <select data-ng-model="personalDetObj.title" ng-required="true" name="title">
            <option value="">Select title</option> 
            <option value="Mr">Mr.</option>
            <option value="Mrs">Mrs.</option>
        </select>                  
    </label>    
    <div class="error-container" ng-show="personalDetailForm.title.$dirty && personalDetailForm.title.$invalid" ng-messages="personalDetailForm.title.$error">
        <div class="error" ng-message="required">
            This field is required!
        </div>
    </div>
</form>

Upvotes: 3

Views: 3788

Answers (1)

dfsq
dfsq

Reputation: 193291

Part responsible for showing messages should be changed to:

<div class="error-container" 
     ng-show="personalDetailForm.title.$dirty && personalDetailForm.title.$invalid" 
     ng-messages="personalDetailForm.title.$error">
    <div class="error" ng-message="required">This field is required!</div>
</div>

Pay attention for correct usage of ngMessages, ngMessage directives and personalDetailForm.title.$error expression (not $errors).

angular.module('demo', ['ngMessages']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>

<form ng-app="demo" name="personalDetailForm" novalidate="">
    <label class="item item-input" ng-class="{'has-errors' : personalDetailForm.title.$invalid, 'no-errors' : personalDetailForm.title.$valid}">
        <span class="input-label">Title:</span>
        <select data-ng-model="personalDetObj.title" ng-required="true" name="title">
            <option value="">Select title</option>
            <option value="Mr">Mr.</option>
            <option value="Mrs">Mrs.</option>
        </select>
    </label>
    <div class="error-container" ng-show="personalDetailForm.title.$dirty && personalDetailForm.title.$invalid" ng-messages="personalDetailForm.title.$error">
        <div class="error" ng-message="required">This field is required!</div>
    </div>
</form>

Upvotes: 1

Related Questions