Angularjs : creating dynamic form

Question

I'm developing a friend invitation feature for a website. Only requirements are : by email and has a max number of invitations at a time.

My idea is the following :

At the start, user only sees one email field. When he enters an email adress in the only field, angularjs validates it (email format check) and creates an additional email field.

Now, I come from a jquery background and I think it's bad practice to manipulate DOM with angular. How would one do it with angularjs ?

Is it a good idea to create a factory that "produces" (from a template file) fields ?

Can a library like bootstrap ui help me write simpler code for form validation and error management

ngasull · Accepted Answer · 2014-12-02 15:58:03Z

This Plunker might fulfill your need at its closest: http://plnkr.co/edit/5qRXQ1XGzUnhYjLCiyYR?p=preview

The key point in this technique is letting the user directly edit a dynamic list of models. Indeed in the example, $scope.invites contains your values. The trick here is referring to them as models:

  <input type="email" class="invite" name="invite{{ $index }}" ng-model="invites[$index].mail" ng-change="checkInvite($index)" />

$index being the index of the current ng-repeat iteration. checkInvite function will take care of watching changes in your invites fields.

Notes:

invites is an array of objects, this way we're sure not to mess with ng-repeat, iterating over the reference that we handle (vs models that would be handled by angular)
The field's name is useful to manually check the field's validity: in the controller we can check a field's validity accessing $scope.formName.fieldName.$valid

I also added an extra test that checks if the user clears a non-last filled-in field. In this case, we remove the field.

Have fun using angular!

deitch · Accepted Answer · 2014-11-27 10:33:23Z

1

Personally, I would find the design confusing, since I wouldn't know I could have more email addresses. At the minimum, I would want a + to indicate to the user that s/he can add more addresses. Think of how airlines do "multiple destinations" searches on their Websites.

However, if you are set at this, use an array in the scope. I am using a table for this, but anything will do.

<input ng-model="newemailaddress"></input><button ng-click="addEmail">Add</button>
<table>
  <tr ng-repeat="addr in addresses"><td>{{addr}}</td></tr>
</table>

And your controller something like:

.controller('MyCtrl',function($scope) {
  $scope.addresses = [];;
  $scope.newemailaddress = "";
  $scope.addEmail = function() {
    // do validation
    if (valid) {
      $scope.addresses.push($scope.newemailaddress);
      $scope.newemailaddress = "";
    };
  };
})

answered Nov 27, 2014 at 10:33

deitch

14.8k15 gold badges75 silver badges102 bronze badges

3 Comments

Timothy Walters Over a year ago

I would add that if you set the type="email" on the input element you get the default validation of email addresses.

Komo Over a year ago

deitch : Thank you that helped quite a bit. I still want to know a clean way to "create" an input field with angularJS. I thought about it and still don't know how should I design this, is a "+" button the most user friendly solution ? Timothy Walters : Yes, that's defintely a good start but I was wondering if this validation was enough : as far as I know it doesn't check that your email has a ".*" at the end

deitch Over a year ago

The cleanest way to create templates in angular is... as templates. Then have them repeat or show or whatever based on scope fields. As to what the user will see, that is a UI design question.

Collectives™ on Stack Overflow

Angularjs : creating dynamic form

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related