проверка текстового поля для номера и требуется в повторяющемся режиме угловой JS

0

См. Ниже ссылку

https://plnkr.co/edit/9HbLMBUw0Q6mj7oyCahP?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.NDCarray = [{val: ''}];

$scope.NDCadd = function() {
    $scope.NDCarray.unshift(
        {val: ''}
    );
};
$scope.data = angular.copy($scope.NDCarray);
$scope.NDCcancel=function(){debugger
  $scope.NDCarray=$scope.data;
}


$scope.NDCdelete = function(index) {
  if(index != $scope.NDCarray.length -1){
    $scope.NDCarray.splice(index, 1);
  }
};
});

Он содержит текстовое поле с кнопкой добавления. Я добавил подтверждение для числа и требуемого поля, он работает нормально. но когда я нажму кнопку "Добавить", он создаст еще одно текстовое поле с введенным значением, которое покажет сообщение проверки для всех текстовых полей, я не хочу показывать сообщение проверки для всех текстовых полей. необходимо показать подтверждение только для соответствующего текстового поля. это означает, что когда я ввожу что-то не так во втором текстовом поле, он показывает сообщение только этому текстовому окну.

Изображение 174551

отображение валидации для всех текстовых полей. Это должно отображаться только для одного текстового поля.

2 ответа

1
Лучший ответ

Рабочий plnkr: https://plnkr.co/edit/f4kAdZSIsxWECd0i8LDT?p=preview

Ваша проблема в вашем HTML, чтобы получить независимые поля, вы должны:

  • Перемещение вне формы ng-repeat
  • Укажите динамическое имя, используя $ index в своих полях, потому что имя - это то, что делает каждое поле независимым от проверки.

Вот окончательный HTML из plnkr, я не касался всего javascript:

<body ng-controller="MainCtrl">
     <form name="myForm">
    <div ng-repeat ="ndc in NDCarray">
    <div class="col-sm-4 type7" style="font-size:14px;">
        <div style="margin-bottom:5px;">NDC9</div>

  <label>Number:
    <input type="number"  ng-model="ndc.value"
           min="0" max="99" name="{{'input_'+$index}}" required>
 </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$dirty && myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.number">
      Not valid number!</span>
  </div>
  <tt>value = {{example.value}}</tt><br/>
  <tt>myForm['input_{{$index}}'].$valid = {{myForm['input_'+$index].$valid}}</tt><br/>
  <tt>myForm['input_{{$index}}'].$error = {{myForm['input_'+$index].$error}}</tt><br/>

    </div>
    <div class="col-sm-4 type7 " style="font-size:14px;">
        <div style="padding-top:20px; display:block"> 
            <span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span> &nbsp; 
            <span>Cancel </span> &nbsp;  
            <span id="addRow" style="cursor:pointer" ng-click="NDCadd()">Add </span>
        </div>
    </div>
  </div>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>

   </form>
  </body>
  • 0
    это не показывает сообщение проверки для требуемого и недействительного номера
  • 0
    просто каждый раз меняйте myForm.input на myForm ['input _' + $ index], и он работает. Примечание: вы не увидите ошибку неверного числа, потому что поле заставляет иметь число, однако вы забудете обрабатывать min и max ошибки проверки. Они будут находиться под myForm['input_'+$index].$error.min & myForm['input_'+$index].$error.max
1

Пара изменений:

  1. Если вы добавите "track by $ index" к вашему ng-repeat, он сделает каждую группу элементов уникальной, так что вам не придется беспокоиться о получении уникальных имен для элементов.

  2. Ваша проверка на число (myForm.ndcValue. $ Error.number) не работала, поэтому я поменял ее на myForm.ndcValue. $ Error.max || myForm.ndcValue. $ error.min

  3. Кроме того, вы можете передать атрибут ng-form непосредственно в div с помощью ng-repeat.

Как это:

  <div ng-repeat="ndc in NDCarray track by $index" ng-form="myForm">
    <div class="col-sm-4 type7" style="font-size:14px;">
      <div style="margin-bottom:5px;">NDC9</div>

      <label>Number:
        <input type="number" ng-model="ndc.value" min="0" max="99" name="ndcValue" required>
      </label>
      <div role="alert">
       <span class="error" ng-show="myForm.ndcValue.$dirty && myForm.ndcValue.$error.required">
       Required!</span>
       <span class="error" ng-show="myForm.ndcValue.$error.max || myForm.ndcValue.$error.min">
       Not valid number!</span>
      </div>
      <tt>value = {{example.value}}</tt>
      <br/>
      <tt>myForm.ndcValue.$valid = {{myForm.ndcValue.$valid}}</tt>
      <br/>
      <tt>myForm.ndcValue.$error = {{myForm.ndcValue.$error}}</tt>
      <br/>

    </div>

Здесь рабочий плункер.

Я изменил имя входного элемента с "input" на "ndcValue", чтобы быть менее запутанным.

  • 0
    это не показывает сообщение проверки для неверного номера
  • 0
    У вас есть min = 0 и max = 99, поэтому я просто установил проверку для всего, что выходит за пределы этого диапазона. Какие еще проверки вы искали?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню