html - Angular form.$invalid 提交按钮不工作

标签 html css angularjs

所以除了按钮之外，我的验证工作正常。我希望它们以不透明度显示为灰色，直到所有内容都有效并且不确定我是否正确设置了 ng-class 和/或正确设置了 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;
}

这里应该发生的是按钮变灰并禁用，直到所有必填字段都有输入并且输入在参数集内。

最佳答案

Angular 形式具有有效性和无效性属性。

实际上，所有 Angular 形元素都是，它们是可嵌套的并且无效冒泡。如果一个元素是无效的，自动所有祖先到表单本身都有 $invalid == true。

您可以在$scope中通过名称调用表单，属性分别为$valid和$invalid。

这是您表单的相关代码:

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

更新:如果你的表单没有按照你想要的方式运行，你应该调试它:

  • 根据表单的逻辑将表单分成字段集
  • 当您的每个字段集都有效时，您的表单就有效
  • 分别测试每个字段集并添加一些 div 以显示每个字段集的 $valid 或 $invalid 值，直到您将其整理出来

我还认为您通过在 html 级别使用内联条件逻辑给您的问题增加了不必要的复杂程度。我会将它保存在 Controller 中，这样更容易理解和构造。

每当某些事情的行为不符合您的预期时，console.log(it)。

还有一件事:一旦变脏，元素将保持 $dirty，无论是否被禁用，除非您对其调用 $setPristine()。所以你应该尽量避免在你的逻辑中使用 $dirty，它可能会产生不必要的困惑。

大多数时候，value.length 和/或 $valid 足以使表单正常工作。

关于html - Angular form.$invalid 提交按钮不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33834532/

上一篇：jquery - 防止父元素上的 CSS 动画应用于子元素

下一篇：html - Bootstrap 响应式布局不适用于 Calc CSS 功能

相关文章：

angularjs - 使用 AngularJS 在客户端执行 HTTP 请求

javascript - 如何重新定位我的 jQuery 弹出窗口？

css - 从第一项中删除 CSS 中的内容和选择器

javascript - 导航子菜单在页面加载时未最小化

angularjs - 可编程聊天的 Twilio 推送通知失败

javascript - 如何使用jquery文件上传 Angular 版本？

html - 更改 <mark> 标签的垂直高亮区域

javascript - 如何使用 PlayFramework 更改 Bootstrap 侧边栏类事件状态？

php - 以 HTML 格式打印 MySQL 表

css - 如何创建带下拉菜单的水平滚动菜单？

©2024 IT工具网  联系我们