CODEWITHSUNDEEP
jqueryhtmlangularjsionic-framework
priyadharshini
priyadharshini

Reputation: 158

How to validate to show error after input field complete in Ionic

*Hi, I am new to angularJS.Now I am trying to show error after complete text in Input .but i got error message at start to type text in Input.Please help out to find solution .thanks in advance.My code is

<label class="item item-input" class="form-group" data-ng-class="   {'has-error':!myForm.zipCode.$valid}">
<span class="input-label">Zip Code</span>
<input type="text" ng-model="currentUser.zipCode"  class="form-control" id="zipCode" name="zipCode"  ng-pattern="/^(\d{5}-\d{4}|\d{5})$/" required="" >
</label>
<span   ng-show="myForm.zipCode.$error.pattern" class="help-block"   style="color:red;" role="alert">Please enter proper Zip Code</span>*

Upvotes: 0

Views: 978

Answers (1)

Paresh Gami
Paresh Gami

Reputation: 4782

<form role="form" name="myForm" novalidate="">

        <div class="form-group" data-ng-class="{'has-error':!myForm.zipCode.$valid && myForm.zipCode.$dirty}">

            <label for="zipCode">Zip Code</label>
                <input type="text" class="form-control" id="zipCode" name="zipCode" ng-model="auth.zip" ng-pattern="/^(\d{5}-\d{4}|\d{5})$/" required="">
        </div>


        <div data-ng-show="myForm.zipCode.$error.required && myForm.zipCode.$dirty " class="alert alert-danger alert-   dismissible" role="alert">
            <strong>Zip Code is Required</strong> 
        </div>

        <div data-ng-show="myForm.zipCode.$error.pattern" class="alert alert-danger alert-dismissible" role="alert">
            <strong>Please enter proper Zip Code</strong> 
        </div>

    </form>

Use $dirty when you load form first time. It will false so your work has done

Upvotes: 1

Related Questions