I am working on Angularjs form validation for multiple input values.
Below is the issue I am facing
- Let's say I entered 'Johnss', directive will validate and give error Invalid name
- click on plus(+) button adjacent to Name label to add new Name input.
- Enter Peter. Now you will see "Invalid name" for both Peter and Johnss.
- Click on cancel button next to Peter.
- Now in place of 'Johnss' try to enter any value and no validation is being done. Whatever value you enter it is accepting and no validation is happening.
Same is the case with 'Place' label.
What is the better way of doing this validation on each of the element?. Can someone please help me on this. Also I am looking for a way to disable + button when validation fails.
Below is the code I have written
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 link: https://codepen.io/sudhir_rocks/pen/ZEpKVrR
