Angular form.$invalid submit button not working - html

Question

So my validation is working the way it should with the exception of the buttons. I want them grayed out with opacity until all is valid and not sure if I have the ng-class set correctly and/or the ng-disabled set correctly or both.
The issue here is more per functionality. I have some fields that show when other fields dropdowns are selected to a particular item. For instance, "Age" is only shown is a particular option is selected whereas with all the other options, it does not show. I show my HTML and then my CSS below.
Yes, is a lengthy form, but hoping you all can help!
My form:
<form class="addClaim" name="claimForm" novalidate ng-submit="saveClaim(claimInfo)" data-ng-model="claimInfo">
<div class="form-group col-md-6 naviaInp">
<label for="beneSelect">Select your benefit</label>
<select class="form-control" name="beneSelect" id="beneSelect" ng-model="benefit" ng-options="item.descr for item in claim" required>
<option value="">Please select a benefit....</option>
</select>
<input type="hidden" ng-model="claimInfo.benefitId" ng-change="{{ claimInfo.benefitId = benefit.id }}"/>
</div>
<div ng-show="claimForm.beneSelect.$dirty && claimForm.beneSelect.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group col-md-8 naviaInp" ng-show="benefit.askSecIns == true" >
<label for="secInc">Do you have secondary insurance</label>
<div>
<label class="radio-inline"><input type="radio" name="optradioSecIns" data-ng-model="claimInfo.isSecIns" value="true">yes</label>
<label class="radio-inline"><input type="radio" name="optradioSecIns" data-ng-model="claimInfo.isSecIns" value="false">no</label>
</div>
</div>
<div class="checkbox form-group col-md-8 naviaInp" ng-show="benefit.askResidual == true">
<p>If you have a Health Care FSA, any residual amount not covered by the HRA will automatically be entered into the FSA. If you do not wish to have the residual amount entered into your Health Care FSA, please indicate </p>
<label><input type="checkbox" name="residualAmount" data-ng-value="true" ng-model="claimInfo.isNoResId">
<p>No, please do not enter residual amounts into my Health Care FSA</p>
</label>
</div>
<div class="form-group col-md-6 naviaInp" ng-show="benefit.expenseTypes != null">
<label for="beneTypeSelect">Select type of service</label>
<select class="form-control" name="expenseType" id="beneServiceSelect" ng-model="expense" ng-options="item.descr for item in benefit.expenseTypes" required>
<option value="">Please select a service....</option>
</select>
<input type="hidden" ng-model="claimInfo.expenseTypeId" ng-change="{{ claimInfo.expenseTypeId = expense.id }}" />
</div>
<div ng-show="claimForm.expenseType.$dirty && claimForm.expenseType.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group naviaInp">
<label for="start">Date of Service</label>
<div>
<input type="text" class="form-control" name="startDate" id="start" placeholder="--/--/----" data-ng-model="claimInfo.fromDate" style="width: 200px;" required>
<span style="padding-left: 20px; padding-right: 20px;">To</span>
<input type="text" class="form-control" id="end" placeholder="--/--/---- (optional)" data-ng-model="claimInfo.toDate" style="width: 200px;">
</div>
</div>
<div ng-show="claimForm.startDate.$dirty && claimForm.startDate.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group col-md-6 naviaInp">
<label for="providerName">Provider Name</label>
<input type="text" name="providerName" class="form-control " id="providerName" ng-maxlength="100" data-ng-model="claimInfo.provider" required>
</div>
<div ng-show="claimForm.providerName.$dirty && claimForm.providerName.$error.required" style="clear: both; margin-top: 8px;">
<p class="claimError" style="color: #ab2328;"><i class="fa fa-exclamation-circle"></i><span style="padding-left: 10px; font-size: 14px; margin-bottom:: 25px;">this is a required field</span></p>
</div>
<div ng-show="claimForm.providerName.$dirty && claimForm.providerName.$error.maxlength" class="errorContainer" style="clear: both; margin-top: 8px;">
<p class="claimError" style="color: #ab2328;"><i class="fa fa-exclamation-circle"></i><span style="padding-left: 10px; font-size: 14px; margin-bottom:: 25px;">must be less than 100 characters</span></p>
</div>
<div class="form-group col-md-6 naviaInp" ng-model="claimInfo.depId" ng-show="benefit.dependents != null">
<label for="beneTypeSelect">Select dependant</label>
<select class="form-control" name="depSelect" id="beneDepSelect" ng-model="dependent" ng-options="item.name for item in benefit.dependents" required>
<option value="">Please select a dependant....</option>
</select>
<input type="hidden" ng-model="claimInfo.depId" ng-change="{{ claimInfo.depId = dependent.id }}" required />
</div>
<div ng-show="claimForm.depSelect.$dirty && claimForm.depSelect.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div class="form-group col-md-6 naviaInp" name="forWhom" ng-show="benefit.dependents == null">
<label for="forWhom">For Whom</label>
<input type="text" class="form-control" id="forWhom" ng-maxlength="100" data-ng-model="claimInfo.who" required >
</div>
<div ng-show="claimForm.forWhom.$dirty && claimForm.forWhom.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div ng-show="claimForm.forWhom.$dirty && claimForm.forWhom.$error.maxlength" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>a maximum of 100 characters are allowed</span></p>
</div>
<div class="form-group col-md-4 naviaInp" name="age" ng-show="benefit.benefCode == 'DCFSA'">
<label for="age">Age</label>
<input type="text" class="form-control" id="age" data-ng-model="claimInfo.age" ng-maxlength="50" required>
</div>
<div ng-show="claimForm.age.$dirty && claimForm.age.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div ng-show="claimForm.age.$dirty && claimForm.age.$error.maxlength" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>a maximum of 50 characters are allowed</span></p>
</div>
<div class="form-group col-md-4 naviaInp">
<label for="claimAmount">Amount</label>
<input type="number" name="amount" class="form-control" id="claimAmount" data-ng-model="claimInfo.amount" required ng-pattern="/^\d{1,4}(\.\d{0,2})?$/">
</div>
<div ng-show="claimForm.amount.$dirty && claimForm.amount.$error.required" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>this is a required field</span></p>
</div>
<div ng-show="claimForm.amount.$dirty && claimForm.amount.$error.pattern" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>the amount must be between $0 and $10,000</span></p>
</div>
<div class="form-group col-md-8 naviaInp">
<label for="claimComment">Comments</label>
<textarea class="form-control" name="comment" rows="5" id="claimComment" placeholder="optional" ng-maxlength="500" data-ng-model="claimInfo.comments">
</textarea>
</div>
<div ng-show="claimForm.comment.$dirty && claimForm.comment.$error.maxlength" class="errorContainer">
<p class="claimError"><i class="fa fa-exclamation-circle"></i><span>a maximum of 500 characters are allowed</span></p>
</div>
<div class="fileArea col-md-8 naviaInp">
<div>
<p>Drag and drop or upload your documentation. Remember, we cannot review your claim without at least one piece of proper documentation for each claimed expense listed above. Be sure your documentation shows the date of service, type of service, and cost of service.</p>
</div>
<div ngf-drop ngf-select ng-model="files" class="drop-box"
ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
accept="image/*,application/pdf"
ngf-pattern="'image/*,application/pdf'"><p>Drag and drop your documents here or click to search for your documents and upload</p></div>
<div ngf-no-file-drop><p>File Drag/Drop is not supported for this browser</p></div>
<div>
<p>Files:</p>
</div>
<div>
<ul>
<li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}} <a class="deleteHandle" ng-click="deleteFile($index)">×</a> </li>
</ul>
</div>
</div>
<div style="padding-bottom: 150px; clear: both;">
<div class="checkbox col-md-8">
<label><input type="checkbox" value="" ng-model="checked"><p>By checking this box, you agree to Navia's <a class="naviaLink" data-toggle = "modal" data-target = "#tcModal" >Terms and Conditions</a>.</p></label>
</div>
<div class="form-group" style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" ng-show="editMode == true" ng-click="updateClaim(claimInfo)" value="+ update claim" ng-disabled="claimForm.$invalid" ng-class="{'disabled-class': claimForm.$invalid}">
<input type="button" class="naviaBtn naviaBlue" ng-show="editMode == false" ng-click="saveClaim()" value="+ add another claim" ng-disabled="claimForm.$invalid" ng-class="{'disabled-class': claimForm.$invalid}">
<input type="button" class="naviaBtn naviaBlue" ng-disabled="!checked && claimForm.$invalid" ng-show="editMode == false" ng-class="{'disabled-class': !checked}" ng-click="saveAllClaims()" value="submit claim(s)">
</div>
<div>
<input type="button" class="naviaBtn naviaRed" ng-click="cancel()" value="cancel">
</div>
<div data-ng-hide="message == ''" data-ng-class="(savedSuccessfully) ? 'alert alert-success' : 'alert alert-danger'">
{{message}}
</div>
</div>
</form>
I did abbreviate code as much as I thought I could but still show what I am doing.
And my CSS:
.disabled-class {
background-color: #999999;
opacity: .30;
}
.disabled-class:hover {
background-color: #999999;
opacity: .30;
}
input.ng-invalid.ng-dirty {
border: 1px solid red;
}
.errorContainer {
clear: both;
margin-top: 8px;
}
.claimError {
color: #ab2328;
}
.claimError > span {
padding-left: 10px;
font-size: 14px;
margin-bottom:: 25px;
}
.disabled {
background-color: #999999;
opacity: .30;
}
.disabled:hover {
background-color: #999999;
opacity: .30;
}
What should happen here is that the buttons are grayed and disabled until all required fields have input and that the input is within the parameters set.

Answer 1

The angular form has both validity and invalidity properties.
Actually, all angular form elements do, they are nestable and invalidity bubbles up. If an element is invalid, automatically all the ancestors up to the form itself have $invalid == true.
You can call the form by its name in the $scope and the properties are $valid, respectively $invalid.
Here's the relevant code for your form:
<form name="claimForm">
// your form logic here
<button type="submit" ng-disabled="claimForm.$invalid" />
</form>
UPDATE: If your form doesn't behave the way you want, you should debug it:
divide your form into fieldsets, according to the logic of your form
when each of your fieldset are valid, your form is valid
test each fieldset sepparately and add some divs to display the $valid or $invalid value of each fieldset until you sort it out
I also think you are adding an unnecessary level of complexity to your problem by using inline conditional logic at html level. I'd keep it in the controller, where it's a lot easier to follow and structure.
Whenever something doesn't behave the way you expect it to, console.log(it).
One more thing: once dirty, an element will stay $dirty regardless of being or not disabled, unless you call $setPristine() on it. So you should probably try to avoid using $dirty in yoru logic, it might produce unncecessary confusion.
Most times, value.length and/or $valid are enough to make forms work.