如何在使用 ng-repeat 时验证 AngularJS 表单输入答案

【问题标题】：How to validate AngularJS form input while is using ng-repeat如何在使用 ng-repeat 时验证 AngularJS 表单输入
【发布时间】：2019-06-16 19:32:09
【问题描述】：

我有一个表单，它具有使用 ng-repeat 动态构建的输入字段。我如何验证这些字段大于另一个输入字段。请查看此示例代码。

<html ng-app>
<head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-init="weekDays = ['monday', 'tuesday', 'wednesday','thursday', 'friday', 'saturday','sunday']">
    <h1>Fun with Fields and ngModel</h1>
    <p>days: {{weekDays}}</p>
    <h3>Binding to each element directly:</h3>
    <div ng-repeat="weekday in weekDays">
        Value: {{weekday}}
        {{day='day_'+weekday; ""}}
        <input name="{{day}}" ng-model="val">                         
    </div>
    <div>
      Number to validate : <input name="numToValidate">
    </div>
</body>

我对 angularJS 很陌生，还在学习。但是我无法通过这个简单的验证来思考。请帮忙。

【问题讨论】：

标签： angularjs forms validation

【解决方案1】：

HTML：

<form name="form">
    <div ng-repeat="weekday in weekDays">
        Value: {{weekday}}
        {{day='day_'+weekday; ""}}
        <input name="{{day}}" ng-model="val" required>                         
    </div>
    <div>
      Number to validate : <input name="numToValidate" required>
    </div>
</form>

脚本：

if($scope.form.$valid){
    // You can write your code here what you want to do after validate.
}

【讨论】：

如何使用元素的索引动态编写验证？

【解决方案2】：

您可以使用带有 min 属性的 html form 元素来检查有效性

<input name="{{day}}" ng-model="weekday.val" min="{{numToValidate}}">

您的 ng-repeat 中的每个输入都需要单独的模型，因此我使用以下内容更改了您的 ng-model

ng-model="weekday.val"

如果你不想使用表单，你可以使用 ng-blur 指令检查你的值的有效性（当输入失去焦点时触发）。

html

<input name="{{day}}" ng-model="weekday.val" ng-blur="checkValid(weekday.val)">

$scope.checkValid = function(value){
    if(value  > $scope.numToValidate){
        alert("please enter a valid number");
    }
}

【讨论】：

如何使用控制器中元素的索引动态编写验证？
感谢更新。单击 ng-repeat 之外的按钮时如何执行相同操作？
使用 ng-click 调用您的 checkValid 函数