在对动态表单使用ng-重复时，在提交时验证所有表单字段的正确方法是什么？
在对动态表单使用ng-重复时，在提交时验证所有表单字段的正确方法是什么？
提问于 2014-12-29 13:10:59
我有一个带有一些字段的表单(使用ng-重复构建，所以我不知道有多少)。我在提交按钮中添加了
ng-disabled=form.field.$invalid并添加到所有字段“必需”，但ng禁用的工作仅针对最后一个字段。我的代码：
<form name="form" novalidate>
<div ng-repeat="q in questions">
<textarea name="answer" type="text" ng-model="answers[$index]" required></textarea>
</div>
<button ng-disabled="form.answer.$invalid || form.answer.$pristine" type="submit" ng-click="submit(q)">'Submit'</button>
</form>如何验证用户更改所有字段？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-29 13:35:25
这是因为您的所有输入都有相同的名称，因此表单控制器实例的行为将只有一个名为answers的属性，它将指向表单中具有该名称的最后一个ng模型。相反，使用ng-attr-name为输入提供不同的名称，并可能附加$index并使用表单的$invalid属性，只要表单中的ng模型(带有约束)之一无效，表单就无效。因此，只需禁用按钮，直到窗体无效，因为它是窗体控制器上的catch属性。
<div ng-repeat="q in questions">
<!-- Provide dynamic form names -->
<textarea ng-attr-name="answer{{$index}}" type="text"
ng-model="answers[$index]" required></textarea>
</div>
<!-- Use form.$invalid -->
<button ng-disabled="form.$invalid || form.$pristine"
type="submit" ng-click="submit(q)">Submit</button>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.questions = ["q1", "q2"]
$scope.answers = {};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="form" novalidate>
<div ng-repeat="q in questions">
<textarea ng-attr-name="answer{{$index}}" type="text" ng-model="answers[$index]" required></textarea>
</div>
<button ng-disabled="form.$invalid || form.$pristine" type="submit" ng-click="submit(q)">Submit</button>
</form>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27696064
复制相关文章
相似问题
在表单提交时触发字段验证
正确提交表单时出现表单验证错误
提交表单Jquery时验证字段
提交时验证所有表单域
表单提交时不提交动态注入的表单字段。
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
