Multiple regular expression pattern on one text area in angular js

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&#58;</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">&#42;</p>
<p class="good" ng-show="helloForm.phone.$valid">&#10004;</p>
</div>
<p class="help-block" ng-show="helloForm.phone.$error.pattern && helloForm.phone.$dirty">Phone format&#58; &#43;15558675309x52 or &#40;555&#41;867-5309x52</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§