Question

我有一个表单，其中包含使用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很陌生，现在仍在学习。但是，我无法通过这种简单的验证来思考。请帮忙。

Answer 1

您可以将HTML form元素与min属性一起使用以检查有效性

<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)">

js

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

Answer 2

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.
}

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

2 个答案: