i've created dynamic multiple step form (with ng-show) have issue : when put button next outside of form, user can navigate in step without filling form. , when put button every div (therefore in form), button next submit of form (but blank) in data base ... if have suggest me, take pleasure !
this html :
<form ng-submit="submitevent(event)"> <div ng-show="data.step == 1"> <div style="border-bottom:none !important; background : transparent; text-align:center;"> <i class="fa fa-edit fa-4x" id="iconstep-ajust"></i> <h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">post</h4> </div> <img id="separation-step" src="img/line.png"></img> <div class="list" style="top:80px;"> <label class="item item-input item-floating-label" style="border:none;"> <input type="text" style="color:#fff;font-size: 22px;text-align:center;" placeholder="post name" ng-model="event.nameid"> </label> <label class="item item-input item-floating-label" style="border:none;"> <textarea style="color:#fff;font-size: 14px;text-align:center;background-color:rgba(255, 255, 255, 0);" placeholder="description de l'événement" ng-model="event.descriptionid"></textarea> </label> </div> </div> <div ng-show="data.step == 2"> <div style="border-bottom:none !important; background : transparent; text-align:center;"> <i class="fa fa-clock-o fa-4x" id="iconstep-ajust"></i> <h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">hour</h4> </div> <img id="separation-step" src="img/line.png"></img> <div class="list" style="top:80px;"> <label class="item item-input item-floating-label" style="border:none;"> <input type="date" style="color:#fff;font-size: 22px;text-align:center;" placeholder="eee - mmm - yyyy" ng-model-options="{timezone: 'utc'}" ng-model="event.dateid" placeholder="date"> </label> <label class="item item-input item-floating-label" style="border:none;"> <input type="time" style="color:#fff;font-size: 22px;text-align:center;" placeholder="hh:mm:ss" ng-model-options="{timezone: 'utc'}" ng-model="event.hourid" placeholder="heure"> </label> </div> </div> <div ng-show="data.step == 3"> <div style="border-bottom:none !important; background : transparent; text-align:center;"> <i class="fa fa-users fa-4x" id="iconstep-ajust"></i> <h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">users</h4> </div> <img id="separation-step" src="img/line.png"></img> <div class="list" style="top:80px;"> <label class="item item-input item-floating-label" style="border:none;"> <input type="number" style="color:#fff;font-size: 18px;text-align:center;" placeholder="users" ng-model="usersid"> </label> <label class="item item-input item-floating-label" style="border:none;"> <input type="number" style="color:#fff;font-size: 16px;text-align:center;" placeholder="age" ng-model="event.ageid"> </label> </div> </div> <div ng-show="data.step == 4"> <div style="border-bottom:none !important; background : transparent; text-align:center;"> <i class="fa fa-map-marker fa-4x" id="iconstep-ajust"></i> <h4 class="text stable" style="font-size: 25px; position: relative; top: 50px; font-family: lobster;">localisation</h4> </div> <img id="separation-step" src="img/line.png"></img> <div class="list" style="top:80px;"> <label class="item item-input item-floating-label" style="border:none;"> <input type="text" style="color:#fff;font-size: 18px;text-align:center;" ng-model="event.addressid" placeholder="adresse (sans le n° de rue)"> </label> <label class="item item-input item-floating-label" style="border:none;"> <input type="text" style="color:#fff;font-size: 22px;text-align:center;" placeholder="ville" ng-model="event.townid"> </label> </div> <button class="button button-icon icon ion-checkmark-round" style="position: absolute; top: 2px; right: 5px; color:#fff; z-index:1000;" type="submit" value="add event" ng-click="stepsuccess()"></button> </div> </form> <button class="button button-icon icon ion-ios-arrow-forward" style="position: absolute; top: 2px; right: 5px; color:#fff; z-index:1000;" ng-hide="data.step == 4" ng-click="nextstep()"></button> </ion-content> my controller js :
$scope.nextstep = function() { $scope.data.step += 1; } $scope.data = { step: 1, } thanks time !
you can disable the button until form elements need completed , valid, using ng-disabled directive, example:
<button type="submit" class="btn btn-primary btn-lg" ng-disabled="artistsignupform.$invalid" ng-click="send()">{{t 'artist-signup.submitbtn'}}</button> in case, using angular's native form validation checker $invalid (which should use, if want to), can bind ng-disabled directive other validation expression require.
Comments
Post a Comment