AngularJS - 无法在动态输入上访问$ valid

Ign*_*nas 3 javascript validation angularjs angularjs-ng-repeat

更新:我添加了一个自定义指令,允许我使用动态生成的名称访问输入,但$ 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
Run Code Online (Sandbox Code Playgroud)

我一直在谷歌上搜索很多关于SO的问题说我应该能够通过$ scope变量访问表单,但不幸的是我不能,虽然它可以通过简单的变量名"step1"访问(动态生成)表格名称).我也可以访问"value"命名字段,但它仍然只是一个DOM对象,因此没有$ valid可用.

JSFiddle:http://jsfiddle.net/Iber/vtvnquee/


我的问题是:

  • 我是否在Angular编码风格方面处于正确的道路上?
  • 我的"向导应用"代码是否合乎逻辑?我的意思是,也许我应该使用不同的方法来构建这些步骤?
  • 我做错了什么,为什么我不能访问$ valid属性?

真的很想了解Angular,因为它看起来像是一个适合大型应用程序的框架以及适合我的方式.

pix*_*its 6

角度的表单验证依赖于两件事:

  1. 您的表单(或ng-form)元素必须具有"name"属性.

    <form name="myform">
    
    Run Code Online (Sandbox Code Playgroud)
  2. 您的输入(或选择)字段必须具有"名称"属性和ng模型.

    <input type="text" name="name" ng-model="name" />
    
    Run Code Online (Sandbox Code Playgroud)

您的表单和输入字段需要name属性的原因是因为您将在$ scope上找到模型并执行客户端验证.

例如

 $scope.myform.name.$error.required
 $scope.myform.name.$valid
 $scope.myform.name.$invalid
Run Code Online (Sandbox Code Playgroud)

[编辑]

我看到你已经在你的小提琴中遵循了这些指导原则.

它不起作用的原因是因为name属性不能是插值.