所以我的验证工作方式与按钮除外。我希望它们变得灰色不透明，直到所有都有效并且不确定我是否正确设置了ng-class和/或ng-disabled设置正确或两者兼而有之。
这里的问题是每个功能更多。我有一些字段显示何时选择其他字段下拉列表到特定项目。例如，＆＃34;年龄＆＃34;仅显示选择的特定选项，而使用所有其他选项，则不显示。我在下面显示我的HTML和CSS。
是的，是一种冗长的形式，但希望你们都能提供帮助！
我的表格：
<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>
我尽可能地缩写代码，但仍然显示我在做什么。
我的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;
}
这里应该发生的是，按钮是灰色的并且被禁用，直到所有必填字段都有输入并且输入在参数集内。
答案 0 :(得分：2)
角度形式具有有效性和无效性。
实际上，所有角形元素都，它们是可嵌套的，无效气泡。如果元素无效，则表单自身的所有祖先自动都有$invalid == true。
您可以在$scope中按名称调用表单，属性分别为$valid $invalid。
以下是您表单的相关代码：
<form name="claimForm">
// your form logic here
<button type="submit" ng-disabled="claimForm.$invalid" />
</form>
更新：如果您的表单没有按照您想要的方式运行，您应该调试它：
$valid或$invalid值，直到您将其排序为止我还认为您通过在html级别使用内联条件逻辑为您的问题添加了不必要的复杂性。我将它保存在控制器中，它可以更容易地跟踪和构建。
每当某些事情没有按照您期望的方式行事时，console.log(it)。
还有一件事：一旦脏，一个元素将保持$dirty，无论是否被禁用，除非你在其上调用$setPristine()。所以你应该尽量避免在yoru逻辑中使用$dirty，这可能会产生不必要的混淆。
大多数情况下，value.length和/或$valid足以让表单生效。