Angularjs 表单验证多个输入值-解网

问：

我正在对多个输入值进行 Angularjs 表单验证。

以下是我面临的问题

假设我输入了“Johnss”，指令将验证并给出错误名称无效
单击名称标签旁边的加号（+）按钮以添加新的名称输入。
输入彼得。现在，您将看到 Peter 和 Johnss 的“无效名称”。
单击 Peter 旁边的取消按钮。
现在代替“Johnss”，尝试输入任何值，并且没有进行任何验证。无论您输入什么值，它都会接受并且不会发生任何验证。

“放置”标签也是如此。

对每个元素进行此验证的更好方法是什么？有人可以帮我解决这个问题吗？此外，我正在寻找一种在验证失败时禁用 + 按钮的方法。

下面是我写的代码

JS公司

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

app.controller('multipleInputsCtrl',function($scope) {
    $scope.users = [
        {}
    ];

    $scope.places = [{}];
   
   $scope.addUser = function() {
       var newUser = {};
       $scope.users.push(newUser);
   }
   
   $scope.removeUser = function(user) {
       var index = $scope.users.indexOf(user);
       $scope.users.splice(index,1);
   }

   $scope.addPlace = function() {
       var newPlace = {};
       $scope.places.push(newPlace);
   }

   $scope.removePlace = function(place) {
       var index = $scope.places.indexOf(place);
       $scope.places.splice(index,1);
   }
});

app.directive('nameValidation', function() {
    var acceptableNames = ['John', 'Sachin', 'Sam', 'Sudhir', 'Nalanda'];
    return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
            mCtrl.$validators.name = function validationError(value) {
                if (value && acceptableNames.includes(value)) {
                    return true;
                } else if (value && !acceptableNames.includes(value)) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    };
})

app.directive('placeValidation', function() {
    var acceptableNames = ['Chicago', 'Houston', 'Dallas', 'Seattle', 'Mumbai'];
    return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
            mCtrl.$validators.place = function validationError(value) {
                if (value && acceptableNames.includes(value)) {
                    return true;
                } else if (value && !acceptableNames.includes(value)) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    };
})

[HTML全

<!doctype html>
<html>

<head>
  <title>Generate Multiple Input Fields Dynamically</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
  <script src="multipleInputs.js"></script>
</head>

<body ng-app="multipleInputs" class="users-container" ng-controller="multipleInputsCtrl">
  <form name="myForm">
    <div>
      <div class="form-group">
        <label for="inputName" style="color:darkblue">Name  <button type="button" class="btn btn-sm" ng-click="addUser()">+</button></label>
        <section ng-repeat="user in users">
          <input class="users-container-inputs-text" type="text" placeholder="First Name" ng-model="user.name" name="personName" name-validation>
            <span class="users-container-inputs-button" ng-click="removeUser(user)">X    
            </span>
            <span class="alert-danger" ng-show="myForm.personName.$error.name"> Invalid name</span>
          </input>
        </section>
      </div>
     <div class="form-group">
        <label for="inputPlace" style="color:darkblue">Place  <button type="button" class="btn btn-sm" ng-click="addPlace()">+</button></label>
        <section ng-repeat="place in places">
          <input class="users-container-inputs-text" type="text" placeholder="Place" ng-model="place.name" name="placeName" place-validation>
            <span class="users-container-inputs-button" ng-click="removePlace(place)">X    
            </span>
            <span class="alert-danger" ng-show="myForm.placeName.$error.place"> Invalid place</span>
          </input>
        </section>
      </div>
    </div>
  </form>
</body>

</html>

Codepen 链接：https://codepen.io/sudhir_rocks/pen/ZEpKVrR

JavaScript angularJS 验证 angularJS 指令 angularjs-validation

Angularjs 表单验证多个输入值

Angularjs form validation multiple input values

评论