Multiple regular expression pattern on one text area in angular js - angularjs

Question

I have a text area field where it inputs 4 types of personal details separated by commas. I need to validate each of those 4 values using regular expression. This is my approach but it is not much of the angular way to do the validations.
var form = angular.module('form', []);
form.controller('helloController', ['$scope', function($scope){
var submitted = false;
var validNumber = new RegExp('numberRegExp');
var validArea = new RegExp('areaRegExp');
var validCity = new RegExp('cityRegExp');
$scope.submit = function(hello){
$scope.number = false;
$scope.area = false;
$scope.city = false;
if (issue){
$scope.submitted = true;
var splittedDetails = hello.details.split(",");
var trimmedDetails = $.map(splittedDetails, $.trim);
if (!validNumber.test(trimmedDetails[0])) {
$scope.inputversion.jiraIssue.$invalid = true;
$scope.number = true;
}else if (!validArea.test(trimmedDetails[1])) {
$scope.inputversion.jiraIssue.$invalid = true;
$scope.area = true;
}else if (!validCity.test(trimmedDetails[2])) {
$scope.inputversion.jiraIssue.$invalid = true;
$scope.city = true;
}else{
alert("Form now submitting");
}
}
};
}]);
<form class="form-horizontal" name="helloForm" ng-controller="helloController" ng-submit="submit(hello)" novalidate ng-app="form">
<div class="form-group" ng-class="{ true:'has-error'}[submitted && helloForm.personal-details.$invalid]">
<label for="helloForm" class="col-sm-2 control-label">Details</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" ng-model="hello.details" placeholder="number, area, city, details ex: 90********, XYX, XYZ" name="personal-details" required></textarea>
<p ng-show="submitted && helloForm.personal-details.$error.required" class="help-block"> Details are required.</p>
<p ng-show="submitted && number" class="help-block">Please check the format of issue number</p>
<p ng-show="submitted && area" class="help-block">Please check the format of product area</p>
<p ng-show="submitted && city" class="help-block">Please check the format of priority</p>
</div>
</div>
</form>
This approach can validate only one detail at a time. But ideally it should validate dynamically in much of the angular way. Please suggest your ideas.
Thanks

Answer 1

No offense, but this seems like a really bad way to validate 3 bits of expected data. Comma delimiting will only work if and only if the user puts 2 and only 2 commas into the field.
Assuming you want persisted data from the form (transfers from one page to another) you will want a Model for this module. The best way to do this is via the .service (since there is only one instance of each named service in a module in Angular). I'll also be using the format that will actually work with minified code and best practices, careof John Papa.
It also assumes you have declared the module elsewhere (declare uses brackets [] while recall does not).
angular.module('form')
.service("DataService", DataService)
DataService.$inject = ["$rootScope"];
function DataService($rootScope) {
var vm = this; //security in declaring (root)scope objects
vm.phone = {value: '', placeholder: 'Enter your phone number'};
vm.area = '';
vm.city = '';
};
Your controller would have little in it aside from the use of the $scope/$rootScope variables (with 2-way binding to fields and the Model) and your submit function for when the user tries to submit.
angular.module('form')
.controller('FormController', FormController);
FormController.$inject = ['$scope', 'DataService'];
function FormController($scope, DataService) {
var vm = this;
vm.phone = DataService.phone;
vm.area = DataService.area;
vm.city= DataService.city;
function submit() {
//persist the data to the next page/controller/etc.
DataService.number = vm.number;
DataService.area = vm.area;
DataService.city = vm.city;
//do work here
};
You can do all of your validation within your HTML, using Angular's 2-way binding of data. Assuming you're also using BootStrap, each field should look similar to the below:
<!-- phone field (required/validated) -->
<div class="row form-group" ng-class="{'has-warning': helloForm.phone.$invalid && helloForm.phone.$dirty,'has-error': helloForm.phone.$error.required && helloForm.phone.$touched}">
<label for="phone" class="col-md-3 control-label">Phone:</label>
<div class="col-md-9">
<input type="text" id="phone" name="phone" ng-model="vm.phone.value" placeholder="{{vm.phone.placeHolder}}" value="{{vm.phone.value}}" ng-required="true"class="skinny form-control" ng-pattern="/^\+?[-0-9)(]{8,31}[0-9x]{0,6}$/i" />
<p class="required" ng-show="helloForm.phone.$invalid || helloForm.phone.$error.required">*</p>
<p class="good" ng-show="helloForm.phone.$valid">✔</p>
</div>
<p class="help-block" ng-show="helloForm.phone.$error.pattern && helloForm.phone.$dirty">Phone format: [phone]x52 or [phone]x52</p>
<p class="help-block" ng-show="helloForm.phone.$error.required && helloForm.phone.$touched">Phone is a required field</p>
</div><br />
Rather than my E.164 (for international numbers) and American Standard phone combination validation (regex inside the ng-pattern field), you can use curly braces to declare your variable regex comparable. I hope this helps or at least points you in the right direction.
Thanks for reading,
C§