Question

我已经创建了一个动态的多步形式（使用ng-show），但我有这个问题：当我将按钮放在窗体的下方时，用户可以在不填写表单的情况下导航。当我将按钮放入每个DIV（因此在表单中）时，按钮接下来在我的数据库中提交所有表单（但是空白）... 如果你对我有建议，我会高兴地接受它！

这是我的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>

我的控制器JS：

  $scope.nextStep = function() {
    $scope.data.step += 1;
  }

  $scope.data = {
    step: 1,
  }

谢谢你的时间！

Answer 1

我有一段时间有类似的问题。我在按钮上使用ng-disabled，直到表单有效：ng-disabled="formName.$invalid"。提交效果是因为HTML5规范说应该提交表单中按钮的默认行为。您可以使用此指令来防止此行为。

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

正如@Mindastic指出的那样，在按钮上添加属性type="button"也可以解决问题，而无需通过角度进行运行时编译。：）

Answer 2

您可以使用ng-disabled指令禁用该按钮，直到您需要的所有表单元素完成且有效，例如：

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

在我的情况下，我正在使用angular的原生表单验证检查器$invalid（如果您愿意，您应该使用它），但可以将ng-disabled指令绑定到任何其他验证你需要的表达方式。

AngularJS - 在第一步中直接提交多步骤表单中的按钮

2 个答案: