When trying to disable a button based on the status of a form, I encountered an interesting issue. After setting all the form values to null, I noticed that when I use the code:
console.log('$scope.assignNewForm.$invalid: ' + $scope.assignNewForm.$invalid);
, it returns false. However, when I use: console.log($scope.assignNewForm);
, I can see that the $invalid property of the form is actually true. This discrepancy happens simultaneously.
Below is the code snippet I posted:
$scope.questionnaireTitleSelected = function(questionnaireTitle) {
$scope.assignForm.recipientType = null;
$scope.assignForm.assigneeName = null;
resetErrorState();
$scope.flags.readOnly = false;
$scope.recipientTypes = _.where($scope.questionnaires, {
questionnaireTitle: questionnaireTitle
});
disabledAssignBtn();
};
function disabledAssignBtn() {
if (!$scope.assignNewForm) {
return;
}
console.log($scope.assignNewForm.$invalid);
console.log($scope.assignNewForm);
$scope.flags.disabledAssignBtn = $scope.assignNewForm.$invalid || $scope.assignedError || $scope.flags.noQuestionnaires;
}
Resulting in: enter image description here