- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
所以除了按钮之外,我的验证工作正常。我希望它们以不透明度显示为灰色,直到所有内容都有效并且不确定我是否正确设置了 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)">×</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>
更新:如果你的表单没有按照你想要的方式运行,你应该调试它:
$valid
或 $invalid
值,直到您将其整理出来我还认为您通过在 html 级别使用内联条件逻辑给您的问题增加了不必要的复杂程度。我会将它保存在 Controller 中,这样更容易理解和构造。
每当某些事情的行为不符合您的预期时,console.log(it)
。
还有一件事:一旦变脏,元素将保持 $dirty
,无论是否被禁用,除非您对其调用 $setPristine()
。所以你应该尽量避免在你的逻辑中使用 $dirty
,它可能会产生不必要的困惑。
大多数时候,value.length
和/或 $valid
足以使表单正常工作。
关于html - Angular form.$invalid 提交按钮不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33834532/
我的设置.py: LANGUAGE_CODE = 'de' TIME_ZONE = require_env("TIME_ZONE_IDENTIFIER") USE_I18N = True USE_L1
谁能给我解释一下 Django 的 forms.Form 和 forms.ModelForm 的相同点和不同点? 最佳答案 从 forms.Form 创建的表单由您手动配置。您最好将这些用于不直接与模
我在用 angularjs 构建的表单上遇到此错误。 `错误:[$compile:multidir] 多个指令 [form, form] 请求 'form' Controller :
我是 Spring 的新手,在尝试显示表单错误时遇到了一些麻烦。 我有以下表格: User Name:
我希望在提交表单时找出 spring:bind 和 form:form 标记库之间的区别。 我的 JSP 片段如下: ....
类型‘AbstractControl’上不存在属性‘Controls’。
有一个问题与此非常相似,但我想以不同的方式提出。 我是一个非常自定的人,但有时我确实喜欢走捷径。就这样吧。 我确实发现这两个类非常相似,尽管其中一个“帮助”程序员更快地编写代码或减少代码/重复代码。将
我在控制台中收到此错误。 “表单提交已取消,因为表单未连接” 自从我们将应用程序迁移到更新版本的 React 后,尝试将我的 redux-form 从 v5 迁移到 v6 之后。 我不确定这里出了什么
我想要的是一个表单,在提交时运行验证检查,并突出显示所有无效字段并添加工具提示。 我正在有效地寻找这样的东西: dojo.forEach(dijit.byId('myForm')._invalidWi
我需要设置symfony2表单元素的值。 我在 Controller 操作中使用了doctrine2实体, Symfony\Component\Form\AbstractType 和createFor
这是用于将数据提交到自定义列表的自定义 Editform.aspx。用户完成表单后,他应该能够点击按钮甚至“确定”按钮,并让 sharepoint 将表单数据提交到列表,然后重定向到项目显示表单 (d
我想知道在 spring 标签中编写所有表单是否是一种好习惯,或者我可以将 spring 表单标签与 html 表单标签混合使用吗? 最佳答案 当您需要 Spring 表单提供的功能时使用它们: 绑定
我正在构建动态表单并希望“即时”添加表单组。 这是我的代码,几乎可以工作: import {Component, OnInit} from '@angular/core'; import {FormG
表格 Form.Load 有什么区别? , Form.Shown和 Form.Activated事件?他们被解雇的顺序是什么? 最佳答案 参见 Windows Forms Events Lifecyc
我正在使用具有路线跟踪功能的 Xamarin Forms 开发一些应用程序。尽管我正在使用 AppCenter,即在 App.xaml.cs OnStart 我添加 protected asy
我正在实现一个 gameboy 模拟器,就像我之前的许多人一样。 我正在尝试实现 PPU 并为此使用代表屏幕的类。 // needed because VS can't find it as depe
我是 Orbeon Form 新手,想使用它。不过,我尝试过 Orbeon Form 网站上的 Form 示例,并用泰语输入了一些数据。是的,可以在“泰语”字段中输入数据。但是当我尝试生成“PDF”时
那么让表单一遍又一遍有效地呈现相同表单的最佳方法是什么,并根据实体的属性值有条件地禁用字段? 我有一个发票实体,需要一个用于创建发票的表单,以及在发票流程的各个阶段(生成、发送、支付等)禁用各个字段的
因此,我一直在与我的同事(开发人员和设计人员)就 Web 表单的自动填充工具进行亲切的辩论。这是一个重要的开发问题,因为它会影响表单的构建方式。 问)自动填充工具(例如 Google 工具栏或 Chr
那么让表单一遍又一遍有效地呈现相同表单的最佳方法是什么,并根据实体的属性值有条件地禁用字段? 我有一个发票实体,需要一个用于创建发票的表单,以及在发票流程的各个阶段(生成、发送、支付等)禁用各个字段的
我是一名优秀的程序员,十分优秀!