Reusing Form snippets in AngularJS

Question

What is the best way to go about creating a small bit of HTML Form elements and reusing that as a snippet multiple times in a form, but with different models?

e.g. inputs for firstName, lastName, streetAddress, city, state, zip for student, parent, pointOfContact

If I was hard-coding the model and inputs, I would have something like:

<input name="student.firstName" ng-model="student.firstName" >
<input name="student.lastName" ng-model="student.lastName" >
<input name="parent.firstName" ng-model="parent.firstName" >
<input name="parent.lastName" ng-model="parent.lastName" >
<input name="pointOfContact.firstName" ng-model="pointOfContact.firstName" >
<input name="pointOfContact.lastName" ng-model="pointOfContact.lastName" >

As a angularJs noob, I'm not sure how to do $modelPrefix.firstName

Template ?

<input name="$modelPrefix.firstName" ng-model="$modelPrefix.firstName" >
<input name="$modelPrefix.lastName" ng-model="$modelPrefix.lastName" >

I'm not clear on what you need. If you have multiple input elements and you reuse them in some way, are you really saving any code? Can you provide the markup you're trying to reduce? — Josh David Miller
– Josh David Miller, Commented Apr 6, 2013 at 2:37

Jason White · Accepted Answer · 2015-11-18 23:22:47Z

3

Here is an example of how to re-use a set of form fields using a directive.

First create an html template file with the common fields (address.html):

<div>
  <label for="line1-id">Address</label>
  <input id="line1-id" name="line1" type="text" ng-model="address.line1" required ng-maxlength="255" />
</div>
<div>
  <label for="city-id">City</label>
  <input id="city-id" name="city" type="text" ng-model="address.city" required ng-maxlength="255" />
</div>
<div>
  <label for="state-id">State</label>
  <input id="state-id" name="state" type="text" ng-model="address.state" required ng-maxlength="255" />
</div>
<div>
  <label for="postalCode-id">Postal code</label>
  <input id="postalCode-id" name="postalCode" type="text" ng-model="address.postalCode" required size="5" ng-maxlength="5" ng-minLength="5"/>
</div>

Then create a directive that references this template (address.js):

(function() { 'use strict';

  angular.module('myModule').directive('myAddress', address);

  function address() {
    var directive = {
      scope: {
        form: '=form',
        address: '=address'
      },
      restrict: 'E',
      templateUrl: 'address.html'
    };

    return directive;
  }

}());

Then you can use this directive in your form:

<form name="ctrl.myForm" ng-submit="ctrl.save()">
  <!-- other form fields -->
  <my-address form="ctrl.myForm" address="ctrl.employee.address"></my-address>
</form>

edited Nov 18, 2015 at 23:22

answered Nov 18, 2015 at 23:16

Jason White

4,8525 gold badges25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cotta Over a year ago

Upvoting for the sample provided.

leonm · Accepted Answer · 2013-04-06 01:31:56Z

2

Wrap each of the reusable HTML components in an Angular Directive. This would allow you to reuse the HTML while still passing in different models to each.

This technique (and others) are explained really will in the videos posted on http://egghead.io/ For your purposes pay close attention to videos 10,11,14 and 15.

answered Apr 6, 2013 at 1:31

leonm

6,48432 silver badges38 bronze badges

2 Comments

Snekse Over a year ago

I'm pretty sure I understand what you mean, but could you provide an example of both the directive and usage of the directive? I'm pretty sure I need scope:true in the directive, but I'm not sure what else I need to look out for.

xedo Over a year ago

do you proposed a pay solution?

Collectives™ on Stack Overflow

Reusing Form snippets in AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related