How to enable/disable validations dynamically in angular js - angularjs

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 ?

Answer 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" />

Answer 2

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.