Combining two ng-model inputs in Angular for seamless data integration

Question

Combining two ng-model inputs in Angular for seamless data integration

New to Angular and seeking some guidance. I currently have two input fields, one for the area code and the other for the number.

// Input field for area code
<input area-input type="tel" required="true" name="area" 
ng-model="employee.home.area"></input>

// Input field for number
<input phone-input type="tel" required="true"
name="number" ng-model="employee.home.number"></input>

Is it possible to combine these fields into one, displaying the area code followed by the number?

Thank you in advance for any suggestions or assistance provided.

javascript angularjs

Answer 1

Answer №1

If you want to create a personalized directive, you can utilize the parsers and formatters functionalities available in ngModelControllers

By doing this, you'll end up with something similar to the following example:

angular.module('myApp', []).
controller('customCtrl', function($scope,$timeout) {
  $scope.info = {location : {city:'New City', zipCode:'12345'}};
  })
  .directive('postalCode', function() {
    function formatPostal(value) {
      console.log('format',value);
          if (!value) return;
          if (!value.zipCode) return value.city;
          value.city = value.city||'';
          return value.city + "-" + value.zipCode;
        }
    return {
      require: 'ngModel',
      scope:{
        ngModel:'='
      },
      link: function(scope, element, attrs, ngModel) {
        scope.$watch(function(){return scope.ngModel;},function(n){
          if(!n) scope.ngModel={city:"",zipCode:""}
          console.log('watch',n);
          ngModel.$viewValue= formatPostal(n);
          ngModel.$render();
        },true);
        
        ngModel.$formatters.push(formatPostal);
        ngModel.$parsers.push(function(value) {
          console.log(value, value.split('-'));
          var parts = value.split('-');
          return {
            city: parts[0],
            zipCode: parts[1]||''
          };
        });
      }
    };
  })

<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e49798b199809d8bd594879690939b">[email protected]</a>" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<div ng-app="myApp" ng-controller="customCtrl">
  <h1>Hello App!</h1>
    // First input field for city<br/>
    <input city-input="" type="text" required="true" name="city" ng-model="info.location.city" /> 
    <br/>// Second input field for zip code<br/>
    <input postal-code-input="" type="text" required="true" name="zipcode" ng-model="info.location.zipCode" />
    <br/><br/>
    //custom field. format: city-zipcode<br/>
  <input data-postal-code type="text" required="true" ng-model="info.location" />
  {{info}}
</div>

Answer 2

If you want to create a personalized directive, you can utilize the parsers and formatters functionalities available in ngModelControllers

By doing this, you'll end up with something similar to the following example:

angular.module('myApp', []).
controller('customCtrl', function($scope,$timeout) {
  $scope.info = {location : {city:'New City', zipCode:'12345'}};
  })
  .directive('postalCode', function() {
    function formatPostal(value) {
      console.log('format',value);
          if (!value) return;
          if (!value.zipCode) return value.city;
          value.city = value.city||'';
          return value.city + "-" + value.zipCode;
        }
    return {
      require: 'ngModel',
      scope:{
        ngModel:'='
      },
      link: function(scope, element, attrs, ngModel) {
        scope.$watch(function(){return scope.ngModel;},function(n){
          if(!n) scope.ngModel={city:"",zipCode:""}
          console.log('watch',n);
          ngModel.$viewValue= formatPostal(n);
          ngModel.$render();
        },true);
        
        ngModel.$formatters.push(formatPostal);
        ngModel.$parsers.push(function(value) {
          console.log(value, value.split('-'));
          var parts = value.split('-');
          return {
            city: parts[0],
            zipCode: parts[1]||''
          };
        });
      }
    };
  })

<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e49798b199809d8bd594879690939b">[email protected]</a>" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<div ng-app="myApp" ng-controller="customCtrl">
  <h1>Hello App!</h1>
    // First input field for city<br/>
    <input city-input="" type="text" required="true" name="city" ng-model="info.location.city" /> 
    <br/>// Second input field for zip code<br/>
    <input postal-code-input="" type="text" required="true" name="zipcode" ng-model="info.location.zipCode" />
    <br/><br/>
    //custom field. format: city-zipcode<br/>
  <input data-postal-code type="text" required="true" ng-model="info.location" />
  {{info}}
</div>

Answer 3

Answer №2

To incorporate the employee's home area and number into your HTML, try using

{{employee.home.area}}+{{employee.home.number}}

.

For the controller, utilize `employee.home.area+employee.home.number`

Hopefully this information proves useful.

Answer 4

To incorporate the employee's home area and number into your HTML, try using

{{employee.home.area}}+{{employee.home.number}}

.

For the controller, utilize `employee.home.area+employee.home.number`

Hopefully this information proves useful.

Combining two ng-model inputs in Angular for seamless data integration

Answer №1

Answer №2

Similar questions

I am interested in monitoring for any alterations to the @input Object

The error has not been handled properly and is being thrown at line 174 in the events.js file

Utilizing Weather APIs to fetch JSON data

Code not functioning properly in Internet Explorer

Button cannot be activated upon selecting a row

Issue with Vue 2: Promise does not resolve after redirecting to another page

Tips for preserving cropped images

What is the functionality of $templateCache?

Having difficulty importing app.js into other modules within ExpressJS

problem arising from the origin preventing me from utilizing localStorage in conjunction with JSDOM

The relevance of this concept in the classroom setting and within the setTimeout function is integral to

Skipping is a common issue encountered when utilizing Bootstrap's Affix feature

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Using Angular as a template engine: A simple guide

In Javascript, async functions automatically halt all ongoing "threads" when a new function begins

Guide to creating a reminder feature in NestJS

Trimming whitespace from strings within HTML tag attributes can be achieved using various methods

Steps for resolving "TypeError: Unable to read properties of undefined (reading 'useSystemColorMode')"Ready to overcome this particular error message?

What steps should I take to set up search paths for node modules in Code Runner within Visual Studio Code?

How to perform a table filtration in AngularJS with a focus on specific table columns