create directive check validation , works fine after form fill out completely, submit button not work properly. note: submit button(next step) working fine before add directive , using angular materials , ng-messages working fine when trying fill out these required field if did not touch or miss field not showing error messages, add validform directive validate form when next step(submit) clicked , after adding directive , error message show when next step button click not take next step page.
directive code :
form.directive('validform', function ($perse) { return { compile: function compile(telement, tattrs, transclude) { return { post: function postlink(scope, element, iattrs, controller) { var form = element.controller('form'); form.$submitted = false; var fn = $parse(iattrs.validform); element.on('submit', function (event) { scope.$apply(function () { element.addclass('ng-submitted'); form.$submitted = true; if (form.$valid) { fn(scope, { $event: event }); } }); }); scope.$watch(function () { return form.$valid }, function (isvalid) { if (form.$submitted == false) return; if (isvalid) { element.removeclass('has-error').addclass('has-success'); } else { element.removeclass('has-success'); element.addclass('has-error'); } }); } } } } });
controller code:
form.controller('step1ctrl', function ($scope, $location, step1cache) { $scope.isempty = true; var fostercatcher = []; $scope.childern = step1cache.getchildern(); $scope.addchild = function () { $scope.childern.push({ }); }; $scope.removechild = function (array, index) { if ($scope.childern.length > 1) { array.splice(index, 1); } }; $scope.checknextstep = function () { (var index = 0; index < $scope.childern.length; index++) { if ($scope.childern[index].isfoster === true) { fostercatcher.push("true"); } } if (fostercatcher.length === $scope.childern.length) { $location.path('/step4'); //'step4' } else { $location.path('/step2'); // 'step2' } }; step1cache.setchildern($scope.childern); }); html:
<md-content layout-padding> <div class="wrap"> <form name="form" valid-form="checknextstep()" novalidate> <div layout-gt-sm="row" layout-align="center" class="page md-inline-form" data-ng-repeat="child in childern"> <md-input-container class="md-block ele "> <label>first name</label> <input required name="firstname" ng-model="child.firstname"> <div ng-messages="form.firstname.$error"> <div ng-message="required">first name required.</div> </div> </md-input-container> <md-input-container class="md-block ele" style="max-width:60px;"> <label>mi</label> <input required name=" middlename " ng-model="child.middlename "> <div ng-messages="form.middlename.$error "> <div ng-message="required">middle name required.</div> </div> </md-input-container> <md-input-container class="md-block ele"> <label>last name</label> <input required name="lastname " ng-model="child.lastname "> <div ng-messages="form.lastname.$error "> <div ng-message="required ">last name required.</div> </div> </md-input-container> <div class="cell "> <label> <b>student?</b></label> <div style="margin-top:15px;"> <md-radio-group required ng-model="child.isstudent"> <md-radio-button value="yes">yes</md-radio-button> <md-radio-button value="no"> no </md-radio-button> </md-radio-group> </div> </div> <div class="cell "> <label><b> child's situation?(check apply) </b></label> <div> <md-checkbox ng-required="child.ishomeless === undefined || child.ishomeless === false " ng-model="child.isfoster"> foster child </md-checkbox> <md-checkbox ng-required="child.isfoster === undefined || child.isfoster === false " ng-model="child.ishomeless"> homeless, migrant, runaway </md-checkbox> </div> <!-- <md-button class="md-fab md-accent" ng-click="gotostep2()" aria-label="edit"> <md-icon md-svg-src="img/ic_mode_edit_white_36px.svg" style="width: 36px; height: 36px;"> </md-icon> </md-button>--> </div> <div id='rem'> <md-button class="md-raised md-primary remove animate-show" ng-if="childern.length !== 1" ng-click="removechild(childern,$index)"> <md-tooltip md-direction="top"> delete </md-tooltip> <md-icon md-svg-src="img/ic_delete_white_48px.svg"></md-icon> </md-button> </div> </div> <div layout-gt-sm="row" layout-align="center"> <md-button class="md-raised md-accent" ng-click="addchild()">add child </md-button> <md-button type="submit" class="md-raised md-primary"> next step </md-button> </div> </form> </div> </md-content>
you should read on form controllers , ng-submit. form controller sets css classes, don't need custom directive.
Comments
Post a Comment