Skip Validation on cancel button in AngularJS

Question

I try to achieve the following functionality. Have editable form inputs in an angular application. For example a user can see his first name being fetched by the server and then clicking an edit button the form text input appears, edit button disappears and in its place the buttons save and cancel appear. I use the angular-bootstrap-show-errors component to show errors.

However when a validation rule is not fulfilled during editing and I click on cancel button the form tries to show the error before going back to the starting state. For example, I press edit and delete all the first name characters, then press cancel, so before disappearing it tries to validate. Below is my view.

<!--First name edits-->
<div class="row">
    <form name="firstNameEditForm" role="form" novalidate>
        <div class="col-xs-3">
            <p class="text-right">First Name:</p>
        </div>
        <div class="col-xs-6" ng-if="model.beforeFirstNameEdit">
            <p class="text-success">
                {{accountData.firstname || "Loading..."}}
            </p>
        </div>

        <div class="col-xs-6" ng-if="!model.beforeFirstNameEdit">
            <div class="form-group" show-errors>
                <input name="firstName" ng-model="accountData.firstname" class="form-control" placeholder="First Name" type="text" required minlength=2 auto-focus />
                <small class="help-block" ng-if="firstNameEditForm.firstName.$error.required">At least 2 characters required</small>
                <small class="help-block" ng-if="firstNameEditForm.firstName.$error.minlength">At least 2 characters required</small>
            </div>
        </div>

        <div class="col-xs-3" ng-if="model.beforeFirstNameEdit">
            <button type="button" class="btn btn-warning btn-xs" ng-click="editFirstName()">Edit</button>
        </div>

        <div class="col-xs-3" ng-if="!model.beforeFirstNameEdit">
            <button type="button" class="btn btn-success btn-xs" ng-click="update(accountData.firstname)">Save</button>
            <button type="button" class="btn btn-danger btn-xs" ng-click="cancelFirstNameEdit()">Cancel</button>
        </div>
    </form>
</div><!--First name edits-->

And the controller

$scope.preFirstNameEditModel = {};
$scope.editFirstName = function() {
    // Copy preedited data locally
    $scope.model.beforeFirstNameEdit = false; 
    $scope.preFirstNameEditModel = angular.copy($scope.accountData.firstname);
}

$scope.cancelFirstNameEdit = function(){
    $scope.model.beforeFirstNameEdit = true; 
    $scope.accountData.firstname = angular.copy($scope.preFirstNameEditModel);
};

How can I completely avoid validation when I click on cancel button? I read some answers on similar questions suggesting to change the type of button to type = "button" but still doesn't solve my issue.

@TJ plnkr.co/edit/F0Msjg?p=preview click on the text input without entering value. Then press the reset button. You'll see that for an instance the field becomes red before it resets and this is the directive's developer example. I guess the below answer of Develman solves my issue and there is a bug in the directive. — Dimitrios Vythoulkas
– Dimitrios Vythoulkas, Commented Feb 17, 2016 at 11:23

Georg Leber · Accepted Answer · 2016-02-17 11:00:49Z

2

The validation of the fields is triggered on focus lost, whichis causing the validation message. You can prevent this behaviour by using ng-show="submitted && firstNameEditForm.firstName.$error.required" and ng-show="submitted && firstNameEditForm.firstName.$error.minlength". This causes the message showing up only when the form is submitted.

Furthermore you have to change the type of the update button to submit.

answered Feb 17, 2016 at 11:00

Georg Leber

3,6005 gold badges43 silver badges68 bronze badges

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

4 Comments

Dimitrios Vythoulkas Over a year ago

This seems to work in a way that it provides a better UX. The messages do not appear but the validation still tries to kick off. I see that because bootstrap turns the input to red instantly before it disappears and return it to the pre-edit mode.

Dimitrios Vythoulkas Over a year ago

There seems to be a bug in the directive plnkr.co/edit/F0Msjg?p=preview here is the developer's example. I'll confirm your answer as the solution. Thanks

Georg Leber Over a year ago

Ok, I have checked the plugin. The only idea I have is to use another trigger for validation. According to the documentation you can change the trigger with showErrorsConfigProvider.trigger('keypress'); Maybe use submit instead of keypress.

Dimitrios Vythoulkas Over a year ago

The above comment together with your answer solves it. Thanks

Collectives™ on Stack Overflow

Skip Validation on cancel button in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related