我有一个使用ng-repeat创建的表.我想为表中的每个元素添加验证.问题是每个输入单元格与其上方和下方的单元格具有相同的名称.我试图使用该{{$index}}值来命名输入,但尽管HTML中的字符串文字显示正确,但它现在正在工作.
这是我现在的代码:
<tr ng-repeat="r in model.BSM ">
<td>
<input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
<span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span>
<span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span>
</td>
</tr>
我已经尝试删除{{}}from索引,但这也不起作用.截至目前,输入的验证属性工作正常,但不显示错误消息.
有人有什么建议吗？
编辑:除了下面的好答案,这里有一篇博客文章更详细地介绍了这个问题:http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /
我有这样的表格:http://jsfiddle.net/dfJeN/
如您所见,输入的名称值是静态设置的:
name="username"
,表单验证工作正常(添加一些东西并删除输入中的所有文本,必须出现一个文本).
然后我尝试动态设置名称值:http://jsfiddle.net/jNWB8/
name="{input.name}"
然后我将此应用于我的验证
login.{{input.name}}.$error.required
(此模式将用于ng-repeat)但我的表单验证已被破坏.它在我的浏览器中被正确解释(如果我检查了我看到login.username.$ error.required的元素).
任何的想法 ？
编辑:在控制台中记录范围后,似乎是
{{input.name}}
表达式不是插值的.我的表单为{{input.name}}属性,但没有用户名.
更新:从1.3.0-rc.3 name ="{{input.name}}"按预期工作.请参阅#1404
我正在尝试验证从后端端点给我的一些表单字段...
所以基本上这些input元素是在a里面动态创建的ng-repeat.因此,input属性也被动态添加,如type,name等...
但是因为name属性是动态添加的,所以当我尝试验证它时,例如:
myForm.elName.$valid
它没有返回任何东西,因为在这一点上,它不知道是什么elName.
我创建了一个jsFiddle来演示这个问题:http: //jsfiddle.net/peduarte/HB7LU/1889/
任何帮助或建议将不胜感激!
FANX.
编辑:
我一直在提到这个AWESOME文档:http://docs.angularjs.org/api/ng.directive:
input.email
嘿我正在尝试在ng-repeat中显示单选按钮列表,它似乎没有考虑我在输入上绑定到ng-model的字段的初始值.
当我给ng-repeat一个简单的数组时,按钮会正确显示初始值.但是如果嵌套的ng-repeat进入图片,则只有每个列表的最后一项用值初始化
这是我的笔:
https://codepen.io/alokraop/pen/JXLZBp
我不知道我哪里出错了.我确保name单选按钮的属性对每个组都是唯一的.
感谢帮助.
我在AngularJS应用程序中创建了一个指令,该应用程序在我的应用程序中生成样式输入.它看起来像这样:
AC.directive('formInput',function ($compile) {
return {
transclude: true,
replace: true,
scope:{},
templateUrl: '/views/partials/form/input.html',
restrict: 'E',
link: function(scope, element, attrs){
scope.opts = attrs;
if(attrs.ngModel){
element.find('input').attr('ng-model', attrs.ngModel);
$compile(element.contents())(scope.$parent);
}
if(!attrs.type){
scope.opts.type = 'text';
}
}
};
}
)
它的模板是:
<label class="acxm-textfield {{opts.cssclass}}">
<span ng-bind="opts.labeltext"></span>
<input type="{{opts.type}}" name="{{opts.inputname}}" value="{{opts.inputvalue}}" placeholder="{{opts.placeholder}}" ng-maxlength="{{opts.maxLength}}"/>
</label>
电话很简单:
<form-input ng-model="UserProfile.FirstName" max-length="50" labeltext="{{'GENERAL.name' | translate}}" cssclass="acxm-p-horizontal" inputname="name" inputvalue="{{UserProfile.FirstName}}"></form-input>
我想为这个字段创建验证,我添加了一个错误信息:
<span ng-show="showError(userInfoForm.name,'email')">
You must enter a valid email
</span>
并且showError是:
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};
基本上,它是从"使用AngularJS掌握Web应用程序开发"一书中复制的.我有一个问题,因为当我记录我的表单时userInfoForm …
更新:我添加了一个自定义指令,允许我使用动态生成的名称访问输入,但$ valid仍未定义.
我是Angular的新手(试图从jQuery转换)我发现它非常棒,但是我已经把头发拉了好几个小时并且无法弄清楚是什么导致了这个问题.
我想要实现的UI工作流程是让用户点击一个步骤,然后显示一个输入字段,他必须填写(验证是必需的,所以我试图使用ng-required/NG-MINLENGTH个).
如果它通过了验证,它应该显示一个勾号图标并激活下一步,它的工作方式相同.
现在的问题是我可以访问表单元素,但我得到的对象是一个DOM对象,它不包含$ valid属性,我需要检查表单/字段是否有效.
17:20行是:
console.log($scope.step1); //undefined
console.log(step1); //dom object
console.log(step1.value); //dom object
console.log(step1.value.$valid); //undefined
我一直在谷歌上搜索很多关于SO的问题说我应该能够通过$ scope变量访问表单,但不幸的是我不能,虽然它可以通过简单的变量名"step1"访问(动态生成)表格名称).我也可以访问"value"命名字段,但它仍然只是一个DOM对象,因此没有$ valid可用.
JSFiddle:http://jsfiddle.net/Iber/vtvnquee/
我的问题是:
真的很想了解Angular,因为它看起来像是一个适合大型应用程序的框架以及适合我的方式.