CODEWITHSUNDEEP
javascripthtmlangularjsforms
Younes Yaas
Younes Yaas

Reputation: 498

AngularJS - Button next in multiple step form submit directly in first step

I've created a dynamic multiple step form (With ng-show) but I have this issue : When I put the button next outside of form, the user can navigate in step without filling the form. And when I put the button into every DIV (therefore in the form), the button next submit all of form (but blank) in my data base ... If you have a suggest for me, I take it with pleasure !

This is my 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 for your time !

Upvotes: 0

Views: 1557

Answers (2)

Sid Shukla
Sid Shukla

Reputation: 1030

I had a similar issue a while back. I was using ng-disabled on the button until form is valid: ng-disabled="formName.$invalid". The submit effect is because HTML5 spec says that the default behaviour of a button in a form should be submit. You can use this directive to prevent this behaviour.

app.directive('preventDefault', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

As @Mindastic pointed out, adding an attribute type="button" on your button also solves the problem without the necessity of a runtime compile by angular. :)

Upvotes: 2

Luis Delgado
Luis Delgado

Reputation: 3734

You can disable the the button until all form elements you need are completed and valid, using the ng-disabled directive, for example:

 <button type="submit" class="btn btn-primary btn-lg" ng-disabled="artistSignupForm.$invalid" ng-click="send()">{{t 'artist-signup.submitBtn'}}</button>

In my case, I am using angular's native form validation checker $invalid (which you should use, if you want to), but can bind the ng-disabled directive to any other validation expression you require.

Upvotes: 2

Related Questions