Angularjs : creating dynamic form -

i'm developing friend invitation feature website. requirements : email , has max number of invitations @ time.

my idea following :

at start, user sees 1 email field. when enters email adress in field, angularjs validates (email format check) , creates additional email field.

now, come jquery background , think it's bad practice manipulate dom angular. how 1 angularjs ?

is idea create factory "produces" (from template file) fields ?

can library bootstrap ui me write simpler code form validation , error management

this plunker might fulfill need @ closest: http://plnkr.co/edit/5qrxq1xgzunhyjlciyyr?p=preview

the key point in technique letting user directly edit dynamic list of models. indeed in example, $scope.invites contains values. trick here referring them models:

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

$index being index of current ng-repeat iteration. checkinvite function take care of watching changes in invites fields.

notes:

• invites array of objects, way we're sure not mess ng-repeat, iterating on reference we handle (vs models handled angular)
• the field's name useful manually check field's validity: in controller can check field's validity accessing $scope.formname.fieldname.$valid

i added test checks if user clears non-last filled-in field. in case, remove field.

have fun using angular!