How to enable/disable validations dynamically in angular js

Question

My form have two buttons say "Draft" and "Submit", so for draft some validations are applicable and same for submit button. I have one variable cmpnStatus it is initialised with value 1. For draft value of cpmnStatus is 0 and for submit it is 1.

<div class="form-group">                
            <label>Short Description<span class="red-ast">*</span></label><br/>
            <textarea ng-model="shortdesc" ng-change="shortchange(shortdesc)" class="form-control b-rad3" ng-required="cmpnStatus == 0"></textarea>     
    </div>

<button type="submit" ng-click="campform.$valid && submitDraft(campform)" class="btn btn-draft">Save as draft</button>            
<button type="submit" class="btn btn-launch" ng-click="campform.$valid && submitCampaign()">Submit for Approval</button>

Below is the code of submitDraft function.

$scope.submitDraft = function(form){
        $scope.cmpnStatus = 0;
        if(form.$valid) {
           alert("valid");
        } else {
           alert("invalid");
        }
        //Then call to save data in db
};

My problem is when I click on draft form shows valid and save data in db and after that it points the required validation because initially value of cpmnStatus is 1 and according to condition required validation condition fails. Again I click on draft button now required validation is working fine because value of cpmnStatus changes from 1 to 0. I want that when user click on draft button and when the value of cpmnStatus changes it should be show me required validation (even in first click) according to condition(ng-required="cmpnStatus == 0"). Is there any other way to do the same ?

@jeff-diederiks I have two buttons for a single form, I want that when user click on one buttons some validations are applicable and when user click on another button some other validations are applicable. e.g. I have two input fields say Title, Description so when user click button 1 title should be mandatory and when user click on button two both the input field should be mandatory. — iit2011081
– iit2011081, Commented Apr 4, 2016 at 15:14

Walfrat · Accepted Answer · 2016-04-04 14:59:39Z

1

1st change the html to be like this :

<button type="submit" ng-disabled="campform.$error" ng-click="submitDraft(campform)" class="btn btn-draft">Save as draft</button>            
<button type="submit" class="btn btn-launch" ng-disabled="campform.$error" ng-click="submitCampaign()">Submit for Approval</button>

Disabling button for user when form is invalid is better.

About the cmpnStatusThings i suggest you to use a checkbox or radio button to switch between draft or approval mode :

<input type="checkbox" ng-model="cmpnStatus" ng-true-value="1" ng-false-value="0"/>

Radio sample :

<input type="radio" ng-model="cmpnStatus" ng-value="1"/>
<input type="radio" ng-model="cmpnStatus" ng-value="0" />

answered Apr 4, 2016 at 14:59

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

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

1 Comment

iit2011081 Over a year ago

Thanks for the suggesstion will think about the radio button.

Jeff Diederiks · Accepted Answer · 2016-04-04 15:33:21Z

Thank you for the clarification. Here is a function I am currently using:

$scope.checkIfSaveAllowed = function() {
  var timer = setTimeout(function() {
    var validControls = document.getElementsByClassName('has-feedback ng-scope has-success');
    var modalSaveBtn = document.getElementById('eventModalSaveBtn');
    if (validControls.length >= 3) {
      if (validControls.length == 4) {
        modalSaveBtn.disabled = false;
      }
      else if (validControls[0].id != "commentFormGroup" && validControls[1].id != "commentFormGroup" && validControls[2].id != "commentFormGroup") {
        modalSaveBtn.disabled = false;
      }
    }
    else {
      modalSaveBtn.disabled = true;
    }
  }, 50);
}

I call this function on every field in the form using an ng-change. That else if in the middle is how I accomplish what you are asking about. The commentFormGroup is not required in my code. I check if (1) there are only three valid fields and (2) none of those valid fields are the optional field, then the button should be enabled.

In your case, you could have two functions called by the ng-change, one for each button or you could specify when one should be disabled and the other enabled.

Alternatively, you could display a customized error message instead of disabling the button. I hope this helps.

Collectives™ on Stack Overflow

How to enable/disable validations dynamically in angular js

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