0

我正在开发一个在服务器端使用 ASP.NET MVC 5 的项目。如本文所述，我在服务器端的表单接受对象数组作为参数。因此，我需要name像这样在我的视图中生成属性。

QualificationList[0].Degree
QualificationList[0].Institute
QualificationList[1].Degree
QualificationList[1].Institute
QualificationList[2].Degree
QualificationList[2].Institute
.
.
.
.
QualificationList[n].Degree
QualificationList[n].Institute

请注意，这不是一个重复的问题，因为我尝试了 StackOverflow 和其他网站的几乎所有解决方案。这种情况有点不同（也很复杂）。这里n不是一个固定值。使用ng-repeat这就是我渲染它的方式，并且效果很好。

<div ng-form="myForm" class="form-group" ng-repeat="q in QualificationList">
     <div class="col-md-9">
         <input class="form-control text-box single-line" ng-model="QualificationList[$index].Degree" ng-required="true" name="QualificationList[{{$index}}].Degree" type="text" value="" />
         <span ng-show="QualificationList[$index].Degree.$invalid">The Degree field is required</span>
      </div>
      <div class="col-md-3">
          <input class="form-control text-box single-line" ng-model="QualificationList[$index].Institute" ng-required="true" name="QualificationList[{{$index}}].Institute" type="text" value="" />
          <span ng-show="QualificationList[$index].Institute.$invalid">The Institute field is required</span>
      </div>
</div>

如上所示，我想验证用户输入的值（学位和学院）。我也尝试了这个解决方案，但它不起作用。

我该怎么做才能显示验证错误？请注意，为了降低复杂性，我在这里只提到两个字段，Degree即Institute。在我的现场项目中，有 20 多个字段需要不同类型的验证（如 ng-pattern、电子邮件等）

为简单起见，我在这里创建了一个小提琴：http: //jsfiddle.net/wa5y5L15/29/

4

1 回答 1

0

您在每个列表项上使用 ngForm，这对于单独的验证是正确的，但您不能命名和引用这样的输入。

由于每个 ngForm 的范围都是孤立的，只需使用一个简单的名称，如 Degree 或 Institute（不要忘记在 ng-show 表达式中使用表单名称作为前缀）：

<div ng-form="myForm" class="form-group" ng-repeat="q in QualificationList">
     <div class="col-md-9">
         <input class="form-control text-box single-line" ng-model="QualificationList[$index].Degree" ng-required="true" name="Degree" type="text" value="" />
         <span ng-show="myForm.Degree.$invalid">The Degree field is required</span>
      </div>
      <div class="col-md-3">
          <input class="form-control text-box single-line" ng-model="QualificationList[$index].Institute" ng-required="true" name="Institute" type="text" value="" />
          <span ng-show="myForm.Institute.$invalid">The Institute field is required</span>
      </div>
</div>

顺便说一句，这是一篇好文章：

http://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform

编辑：

好的，我知道了。我认为你不能使用表单模型。但是您可以使用正则表达式检查控制器范围内的属性（并将其放入您的 ngShow 中）。如果您只需要非空字符串，请像这样使用：

<div ng-form="myForm" class="form-group" ng-repeat="q in QualificationList">
    <div class="col-md-10 col-xs-10">
        <div class="col-md-6 col-xs-6">
            <input class="form-control text-box single-line" ng-model="QualificationList[$index].Degree" ng-required="true" name="QualificationList[{{$index}}].Degree" type="text" value="" /> 
            <span ng-show="!QualificationList[$index].Degree">The Institute field is required</span>
        </div>
        <div class="col-md-6 col-xs-6">
            <input class="form-control text-box single-line" ng-model="QualificationList[$index].Institute" ng-required="true" name="QualificationList[{{$index}}].Institute" type="text" value="" /> 
            <span ng-show="!QualificationList[$index].Institute">The Institute field is required</span>
        </div>
    </div>
</div>
于 2014-12-22T11:01:15.213 回答