AngularJS: on-click if pristine OR if dirty and valid

Question

I have an input field:

<input name="fName" type="text" class="form-control dude.firstName"
     ng-trim="false"
     ng-pattern="patterns.name"
     ng-model="dude.firstName"
     ng-model-options="{ updateOn: 'blur' }"
     required>
<span class="error" ng-show="idForm.fName.$error.pattern">
     Please only use letters, forward slashes, and hyphens
</span>

My requirements are this:

If user has not changed anything, it needs to run saveIdentification
If user has changed something and it is not valid, then stop and allow the form to display the message

If the user has changed something and it is valid, then run saveIdentification

<span 
    ng-show="localEditing.id=='SAVE'" 
    tabindex="0" 
    title="Save Changes" 
    class="globalIcon-save action-edit-button" 
    ng-click="(idForm.$pristine || (idForm.$dirty && idForm.$valid)) && saveIdentification()">
</span>

The solution above fulfills requirements 1 and 2 but not 3. It will not save if the form is changed and valid.

lealceldeiro · Accepted Answer · 2017-07-11 20:55:28Z

Please see below snippet. I just made a slight variation to your code in order to receive the form object as a parameter in the saveIdentification function.

Notice that I added an input with ng-maxlength="3" in order to reproduce the scenario where the form is invalid (When the input text is larger than 3)

When the conditions described by you are met a "ran saveIdentification!" text is logged in the browser console (devtools).

angular
  .module('app', [])
  .controller('myCtrl', function() {

    var vm = this;

    vm.wizard = {
      saveIdentification: fnSaveIdentification
    };

    return vm.wizard;

    function fnSaveIdentification(form) {debugger;
      if (form && (form.$pristine || form.$valid)) {    //<-- Condition here!
        console.log('ran saveIdentification!');
      }
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl as ctrl">

  <form name="myForm">
    <input name="i1" type="text" ng-maxlength="3" ng-model="ctrl.input">
    <a href="#" ng-click="ctrl.saveIdentification(myForm)">Submit</a>

    <!-- Display message here!! (modify as you need it)-->
    <span ng-show="myForm.$invalid">Form is invalid</span>
  </form>

</div>

SamB · Accepted Answer · 2017-07-11 20:17:41Z

0

try this:

ng-disabled="(idForm.$dirty && idForm.$invalid))"
ng-click="saveIdentification()"
>

<span ng-show="(idForm.$dirty && idForm.$invalid))">
Your error message goes here!!!
</span>

edited Jul 11, 2017 at 20:17

answered Jul 11, 2017 at 20:07

SamB

1516 bronze badges

4 Comments

Lurk21 Over a year ago

This fuilfills requirements 1 and 3 but not 2. If the user has entered invalid data and clicks the save icon, it runs saveIdentification().

Lurk21 Over a year ago

Same. Please see above where I have included information about the validation being done.

SamB Over a year ago

Why are you using span instead of button for click?? If you use button then you can use ng-disabled as I suggested.

lealceldeiro Over a year ago

But, Why use ng-disabled? Is this a requirement or just an option introduced by you, @SamB? When the OP says "... not valid, then **stop** and..." I think it means, not to continue the execution of the function, but not to disable the ability to call the function.

Collectives™ on Stack Overflow

AngularJS: on-click if pristine OR if dirty and valid

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related