Угловая форма. $ Invalid submit кнопка не работает

Question

Так что моя проверка работает так, как должна, за исключением кнопок. Я хочу, чтобы они были помечены серым цветом с непрозрачностью до тех пор, пока все не будет действительным и не будет уверенным, правильно ли установлен набор ng-классов и/или отключен ng-disabled или оба.

Проблема здесь более функциональна. У меня есть несколько полей, которые показывают, когда выпадающие окна других полей выбраны для определенного элемента. Например, отображается только «Возраст», выбирается конкретный вариант, тогда как со всеми другими параметрами он не отображается. Я показываю свой 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)">&times;</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; 
} 

Что должно произойти в том, что кнопки неактивны и отключены, пока все необходимые поля имеют вход и вход находится в пределах параметров, установленных.

Answer 1

Угловая форма обладает как действительностью, так и недействительностью.

На самом деле, все угловые элементы формы делают, они вкладываемые и недействительности пузырится. Если элемент недействителен, автоматически все предки до самой формы имеют $invalid == true.

Вы можете назвать форму по ее названию в $scope, а свойства - $valid, соответственно $invalid.

Вот соответствующий код вашей формы:

<form name="claimForm"> 
    // your form logic here 
    <button type="submit" ng-disabled="claimForm.$invalid" /> 
</form> 

---

UPDATE: Если ваша форма не ведет себя так, как вы хотите, вы должны отладить:

• разделите вашу форму в полях, в соответствии с логикой вашей формы
• , когда все ваши поля заданы, ваша форма действительна
• теста каждый FIELDSET sepparately и добавить некоторые дивы, чтобы отобразить значение каждого FIELDSET $valid или $invalid до тех пор, пока разбирайтесь

Я также думаю, что вы добавляете ненужный уровень сложности вашей проблемы с помощью встроенного условной логики на уровне html. Я бы сохранил его в контроллере, где намного проще следовать и структурировать.

Всякий раз, когда что-то не ведет себя так, как вы ожидаете, console.log(it).

Еще одна вещь: один раз грязный элемент останется $dirty независимо от того, был ли он отключен, если вы не вызываете $setPristine().Поэтому вы, вероятно, должны избегать использования $dirty в логике yoru, это может вызвать непонимание.

В большинстве случаев value.length и/или $valid достаточно, чтобы формы работали.