Как проверить ввод формы AngularJS, когда используется ng-repeat - PullRequest
0 голосов
/ 23 января 2019

У меня есть форма с полями ввода, которая динамически создается с помощью 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 и все еще учусь.Однако я не смог продумать эту простую проверку.Пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 24 января 2019

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.
}
0 голосов
/ 23 января 2019

Вы можете использовать элемент html form с атрибутом min для проверки правильности

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

вам понадобится отдельная модель для каждого из ваших входов в ваш ng-повтор, поэтому я изменил вашу ng-модель следующим образом

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");
    }
}
...