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 messng-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!
Comments
Post a Comment