CODEWITHSUNDEEP
javascripthtmlangularjsformsvalidation
CraZyDroiD
CraZyDroiD

Reputation: 7115

angularJS form validation only working for the first time

I'm working on form validations in angularjs and so far i have completed 99%. But the issue is my form validation works correct only for first time submit only. it's confusing to explain but i'll try my best to explain :P .here it is. When i reset my form it is showing error messages that the fields are empty(As it should).like this

enter image description here

After that if i fill 2 fields and submit again i'll work correctly as it should.like this

enter image description here

Now my problem comes.If i reset my form (fields get cleared) and submit the form, only description field error is shown but not in other two.like this

enter image description here

My code

<form name="userForm" ng-submit="submitForm(userForm.$valid, user)" novalidate>


        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && userForm.name.$dirty && submitted || (userForm.name.$invalid && userForm.name.$pristine) && submitted }">
            <label>Name*</label>
            <input type="text" name="name" class="item-input-wrapper" ng-model="user.name"  required>
            <label><p ng-show="submitted && userForm.name.$error.required" class="help-block "><font color="#009ACD">You name is required.</font></p></label>
        </div>

         <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine  && submitted  }">
            <label>Email</label>
            <input type="email" name="email" class="item-input-wrapper"ng-model="user.email"  required >
            <label><p ng-show="userForm.email.$invalid && userForm.email.$dirty && submitted || userForm.email.$invalid && userForm.email.$pristine && submitted" class="help-block"><font color="#009ACD">Enter a valid email.</font></p></label>
        </div>

        <!-- DESCRIPTION -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }">
            <label>Description</label>
            <input type="text" name="username" class="item-input-wrapper" ng-model="user.username"  ng-minlength="5"  ng-maxlength="60" required>
            <label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted"  class="help-block"><font color="#009ACD">Description is too short.</font></p></label>
            <label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label>
            <label><p ng-show="submitted && userForm.username.$error.required" class="help-block "><font color="#009ACD">Description is required.</font></p></label>
        </div>


        <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"  type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center "
            ng-click="submitted=false" padding-top="true">Reset</button>
            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
            ng-click="submitted=true" type="submit" padding-top="true">Submit</button>
        </div>
    </form>
</div>

Upvotes: 1

Views: 2024

Answers (3)

Skull
Skull

Reputation: 1262

This works for me.try it.

<form name="forms.sample" novalidate>

        <md-input-container class="md-block" flex-gt-sm>
            <label>Name:</label>
            <input ng-focus="focus=true" ng-blur="focus=false" style="width:400px;" class="form-control" name="Name" type="text" data-ng-model="Name" ng-pattern="SomePattern" required placeholder="enter the Name here" />
            <div ng-messages for="forms.sample.Name.$error" ng-if="!focus">
                <div ng-if='forms.sample.Name.$touched' ng-message="required">This is required.</div>
                <div ng-if='forms.sample.Name.$touched' ng-message="pattern">Enter a valid domain name</div>
            </div>
        </md-input-container>    
    </form>

Upvotes: 0

CraZyDroiD
CraZyDroiD

Reputation: 7115

figured out the solution

inside your controller add this

$scope.reset = function() {
            $scope.user = angular.copy($scope.orig);
            $scope.userForm.$setPristine();

};

Here 'userForm' should be your form name and 'user' should be your model.

Upvotes: 0

SDK
SDK

Reputation: 1542

$setPristine(); may be useful for what you looking for. Try to add like this as shown below...

<button class="button" type="reset" ng-click="form.$setPristine()">Reset</button>

For further information and for working demo refer the below link

AngularJS does not proper handle button type="reset"?

you can also refer the below link for setting up the form to pristine state

Reset form to pristine state (AngularJS 1.0.x)

Upvotes: 1

Related Questions