validate form using angularjs

Question

I have 3 fields like password, new password and confirm new password, and Submit button.

Now i want to perform 2 functions :

When existing password is written SUBMIT button should activate.
When new password is written the submit button should get deactivated and gets activated only when the confirm new password is entered

Here is my code :

<div ng-show="normalSignIn">
    <div class="row" ng-class="{ 'has-error' : accountDetailsForm.exispassword.$invalid && !accountDetailsForm.exispassword.$pristine }">
        <div class="col">
            <div class="input-label">Existing Password*</div>
            <input type="password" class="edit-password" placeholder="Please enter" ng-model="signinInfo.password" name="exispassword" ng-minlength="8" ng-readonly="isReadOnly"
                ng-required="normalSignIn" >
            <p ng-show="accountDetailsForm.exispassword.$error.minlength && !accountDetailsForm.exispassword.$pristine" class="help-block">Password must be 8 character
                long.</p>
            <p ng-show="accountDetailsForm.exispassword.$error.required && !accountDetailsForm.exispassword.$pristine" class="help-block">Please enter a password.</p>
        </div>
    </div>
    <div class="row" ng-class="{ 'has-error' : accountDetailsForm.password.$invalid && !accountDetailsForm.password.$pristine }">
        <div class="col">
            <div class="input-label">New Password</div>
            <input type="password" class="edit-password" placeholder="Please enter" ng-model="accountDetails.password" name="password" ng-minlength="8" ng-readonly="isReadOnly" ng-dirty="true">
            <p ng-show="accountDetailsForm.password.$error.minlength && !accountDetailsForm.password.$pristine" class="help-block">Password must be 8 character long.</p>

        </div>
    </div>
    <div class="row" ng-class="{ 'has-error' : accountDetailsForm.confirmPassword.$invalid && !accountDetailsForm.confirmPassword.$pristine }">
        <div class="col">
            <div class="input-label">Confirm New Password</div>
            <input type="password" class="edit-password" placeholder="Please enter" ng-model="confirmPassword" name="confirmPassword" match="accountDetails.password"
                ng-readonly="isReadOnly">
            <p ng-show="accountDetailsForm.confirmPassword.$error.match && !accountDetailsForm.confirmPassword.$pristine" class="help-block">Confirm and New password should
                be same.</p>
        </div>
    </div>
</div>

<div class="col">
        <button class="button button-block button-rentr-primary" ng-hide="hideTapToEdit" ng-click="landlordDetailCtrl.updateAccountDetails(signinInfo,accountDetails)"
            ng-disabled="accountDetailsForm.$invalid">SAVE</button>
    </div>

Any one have idea please let me know.?

Christian Zosel · Accepted Answer · 2016-03-04 10:13:57Z

1

If i understand correctly, you want the submit button to be disabled only when the user changed the form towards an invalid state - and not right from the start.

This can be done with the $dirty flag, which specifies if the control has been changed by the user. You could try changing the ng-disabled of your submit button to the following:

accountDetailsForm.exispassword.$dirty &&
accountDetailsForm.password.$dirty && 
accountDetailsForm.$invalid

PS: There is also $touched, which is very similar to $dirty. For the fine difference see the docs.

answered Mar 4, 2016 at 10:13

Christian Zosel

1,4241 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user Over a year ago

it should be disabled at start

Amit Sirohiya · Accepted Answer · 2016-03-04 10:24:25Z

0

You can try this -

 ng-disabled="!(signinInfo.password || (accountDetails.password && confirmPassword))"

So your button code will be -

    <button class="button button-block button-rentr-primary"
            ng-hide="hideTapToEdit"
            ng-click="landlordDetailCtrl.updateAccountDetails(signinInfo,accountDetails)"
            ng-disabled="!(signinInfo.password || (accountDetails.password && confirmPassword))">
           SAVE
    </button>

answered Mar 4, 2016 at 10:24

Amit Sirohiya

3331 silver badge13 bronze badges

Collectives™ on Stack Overflow

validate form using angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related