how to create dynamic form in angularjs? -
my error description:
step 1: appending template using directive.
step 2: remove appended template using scope function "removemilestonediv".
step 3: after submit form. but, can't submitted.
i think have add template bind scope variable. but, have remove template scope variable can't unbind.
create directive add milestone:
app.directive('addmilestone', ['$compile', function ($compile) { // inject $compile service dependency return { restrict: 'a', link: function (scope, element, attrs) { // click on button add new input field element.find('a').bind('click', function () { // i'm using angular syntax. using jquery have same effect // create input element // var input = angular.element('<div id="scope.milestoneid_'+ scope.milestonecounter +'" class="form">milestone - '+scope.milestonecounter+'</div>'); var input = angular.element(''+ '<div class="card bg-white" id="milestonediv_'+ scope.milestonecounter +'">'+ '<div class="card-header" ng-bind="\'project.add_milestone\' | translate"></div>'+ '<a href="javascript:void(0)" class="removebtn glyphicon glyphicon-remove form-control-feedback" ng-click="removemilestonediv('+ scope.milestonecounter +',0,0)"></a>'+ '<div class="card-block m-b-0">'+ '<div compile-template class="form-group">'+ '<label class="col-sm-2 control-label"><span ng-bind="\'project.company_milestone_id\' | translate"></span></label>'+ '<div class="col-sm-5">'+ '<input type="text" class="form-control" ng-model="company_milestone_id['+ scope.milestonecounter +']" ng-maxlength="100" name="company_milestone_id_'+ scope.milestonecounter +'" required>'+ '<div ng-messages="frmprojectadd[\'company_milestone_id_'+scope.milestonecounter+'\'].$error" role="alert" class="help-block has-error">'+ '<span ng-message="required" class="help-block has-error">company milestone id required.</span>'+ '<span class="help-block has-error" ng-message="maxlength">maximum 100 characters allowed!</span>'+ '</div>'+ '</div>'+ '</div>'+ '<div compile-template class="form-group">'+ '<label class="col-sm-2 control-label" ng-bind="\'project.milestone_name\' | translate"></label>'+ '<div class="col-sm-5">'+ '<input type="text" ng-maxlength="100" class="form-control" ng-model="milestone_name['+ scope.milestonecounter +']" name="milestone_name_'+ scope.milestonecounter +'" required>'+ '<div ng-messages="frmprojectadd[\'milestone_name_'+scope.milestonecounter+'\'].$error" class="has-error login-error">'+ '<span ng-message="required" class="help-block has-error">milestone name required.</span>'+ '</div>'+ '</div>'+ '</div>'+ '<div compile-special-template class="form-group">'+ '<label class="col-sm-2 control-label" ng-bind="\'project.select_employee\' | translate"></label>'+ '<div class="col-sm-10">'+ '<select style="min-width:250px;" ui-select2 name="select_new_employee_'+scope.milestonecounter+'" ng-model="selectemployee['+ scope.milestonecounter +']" data-placeholder="select employee" ng-required="true" multiple>'+ '<option ng-repeat="manager in managerlist" value="{{manager.id}}">{{manager.username}}</option>'+ '</select>'+ '</div>'+ '<div ng-messages="frmprojectadd[\'select_new_employee_'+scope.milestonecounter+'\'].$error" class="has-error login-error">'+ '<span ng-message="required" class="help-block has-error">employee required.</span>'+ '</div>'+ '</div>'+ '</div>'); // compile html , assign scope var compile = $compile(input)(scope); // append input div $('#milestonehtml').append(input); // increment counter next input added scope.milestonecounter++; }); } } }]); remove milestone using function:
$scope.removemilestonediv = function(key, id, flag) { var confirmval = confirm("are sure want delete milestone?"); if(confirmval) { $('#milestonediv_'+key).remove(); if(flag == 1){ if(id != 0) { $scope.deletedmilestoneids.push(id); } } } },
create 1 array:
$scope.milestonecounternew = [{ 'countid':1, 'company_milestone_id':'', 'milestone_name':'', 'milestone_start_date':'', 'milestone_end_date':'', 'milestone_completion_date':'', 'selectemployee':'', }]; create 1 scope function
$scope.milestonehtmladd = function() { $scope.milestonecounter++; var counterobj = {countid: $scope.milestonecounter }; $scope.milestonecounternew.push(counterobj); }; my dynamic html
<!-- add milestone - start --> <div class="row" ng-repeat="(counterkey, countervalue) in milestonecounternew" id="milestone_display_id_{{countervalue.countid}}"> <div class="card bg-white mt50"> <div class="card-header"><span ng-bind="'project.add_milestone' | translate"></span></div> <a ng-if="counterkey > 0" href="javascript:void(0)" class="removebtn glyphicon glyphicon-remove form-control-feedback" ng-click="milestonedivremove(counterkey,0,0)"></a> <div class="card-block m-b"> <!--milestone sub section--> <!-- company milestone id --> <div class="form-group"> <label class="col-sm-2 control-label"><span ng-bind="'project.company_milestone_id' | translate"></span></label> <div class="col-sm-5"> <input type="text" class="form-control" ng-model="countervalue.company_milestone_id" ng-maxlength="100" name="company_milestone_id_{{countervalue.countid}}" required> <div ng-if="frmprojectadd.$submitted || frmprojectadd['company_milestone_id_'+countervalue.countid].$touched" ng-messages="frmprojectadd['company_milestone_id_'+countervalue.countid].$error" role="alert" class="help-block has-error"> <span ng-message="required" class="help-block has-error">company milestone id required.</span> <span class="help-block has-error" ng-message="maxlength">maximum 100 characters allowed!</span> </div> </div> </div> <!-- milestone name --> <div class="form-group"> <label class="col-sm-2 control-label"><span ng-bind="'project.milestone_name' | translate"></span></label> <div class="col-sm-5"> <input type="text" class="form-control" ng-model="countervalue.milestone_name" ng-maxlength="100" name="milestone_name_{{countervalue.countid}}" required> <div ng-if="frmprojectadd.$submitted || frmprojectadd['milestone_name_'+countervalue.countid].$touched" ng-messages="frmprojectadd['milestone_name_'+countervalue.countid].$error" role="alert" class="help-block has-error"> <span ng-message="required" class="help-block has-error">milestone name required.</span> <span class="help-block has-error" ng-message="maxlength">maximum 100 characters allowed!</span> </div> </div> </div> <!-- milestone start date --> <div class="form-group"> <label class="col-sm-2 control-label"><span ng-bind="'project.milestone_start_date' | translate"></span></label> <div class="col-sm-3"> <div class="input-group"> <input name="milestone_start_date_{{countervalue.countid}}" type="text" uib-datepicker-popup="mm/dd/yyyy" ng-model="countervalue.milestone_start_date" is-open="dpopened['milestone_start_date_'+countervalue.countid]" ng-click="milestone_start_date[countervalue.countid].open = true" max-date="maxdate" datepicker-options="dateoptions" close-text="close" ng-required="true" class="form-control" min-date="mindate" ng-change="set_min_milestone_end_date(milestone_start_date[countervalue.countid])" disabled> <span class="input-group-addon" ng-click="open($event,'milestone_start_date_{{countervalue.countid}}')"><i class="fa fa-calendar"></i></span> </div> <div ng-if="frmprojectadd.$submitted || frmprojectadd['milestone_start_date_'+countervalue.countid].$touched" ng-messages="frmprojectadd['milestone_start_date_'+countervalue.countid].$error" role="alert" class="help-block has-error"> <span ng-message="required" class="help-block has-error">milestone start date required.</span> </div> </div> </div> <!-- milestone end date --> <div class="form-group"> <label class="col-sm-2 control-label"><span ng-bind="'project.milestone_end_date' | translate"></span></label> <div class="col-sm-3"> <div class="input-group"> <input name="milestone_end_date_{{countervalue.countid}}" type="text" uib-datepicker-popup="mm/dd/yyyy" ng-model="countervalue.milestone_end_date" is-open="dpopened['milestone_end_date_'+countervalue.countid]" ng-click="milestone_end_date[countervalue.countid].open = true" max-date="maxdate" datepicker-options="dateoptions" close-text="close" ng-required="true" class="form-control" min-date="milestone_end_mindate" ng-change="set_min_milestone_completed_date(milestone_end_date[countervalue.countid])" disabled> <span class="input-group-addon" ng-click="open($event,'milestone_end_date_{{countervalue.countid}}')"><i class="fa fa-calendar"></i></span> <div ng-if="frmprojectadd.$submitted || frmprojectadd['milestone_end_date_'+countervalue.countid].$touched" ng-messages="frmprojectadd['milestone_end_date_'+countervalue.countid].$error" role="alert" class="help-block has-error"> <span ng-message="required" class="help-block has-error">milestone end date required.</span> </div> </div> </div> </div> <!-- milestone completion date --> <div class="form-group"> <label class="col-sm-2 control-label"><span ng-bind="'project.milestone_completion_date' | translate"></span></label> <div class="col-sm-3"> <div class="input-group"> <input type="text" uib-datepicker-popup="mm/dd/yyyy" ng-model="countervalue.milestone_completion_date" is-open="dpopened['milestone_completion_date_'+countervalue.countid]" ng-click="milestone_completion_date[countervalue.countid].open = true" max-date="maxdate" datepicker-options="dateoptions" close-text="close" class="form-control" min-date="milestone_completed_mindate" disabled> <span class="input-group-addon" ng-click="open($event,'milestone_completion_date_{{countervalue.countid}}')"><i class="fa fa-calendar"></i></span> </div> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"><span ng-bind="'project.select_employee' | translate"></span></label> <div class="col-sm-10"> <select name="select_employee_{{countervalue.countid}}" ui-select2 ng-model="countervalue.selectemployee" data-placeholder="select employee" ng-required="true" multiple> <option ng-repeat="manager in managerlist" value="{{manager.id}}">{{manager.username}}</option> </select> <div ng-if="frmprojectadd.$submitted || frmprojectadd['select_employee_'+countervalue.countid].$touched" ng-messages="frmprojectadd['select_employee_'+countervalue.countid].$error" role="alert" class="help-block has-error"> <span ng-message="required" class="help-block has-error">employee required.</span> </div> </div> </div> <!-- milestone sub section --> </div> </div> </div> <!-- add milestone end -->
Comments
Post a Comment