Question

我正在尝试创建一个多表单/向导步骤导航。我正在使用ng-switch来创建步骤。但我卡住了，这是相关的代码：

HTML ：

<div ng-controller="stepCtrl">
<div ng-switch="step">
   <div ng-switch-when="1">
      <div ng-controller="postAddressDataCtrl">
         <form url="users/createaddress" ng-submit="add()">
            <label class="input-label">
            <span class="label-title">
            Line 1
            </span>
            <input type="text" name="line-1" ng-model="line1" placeholder="Line 1">
            </label>

            <label class="input-label">
            <span class="label-title">
            Line 2
            </span>
            <input type="text" name="line-2" ng-model="line2" placeholder="Line 2">
            </label>

            <label class="input-label">
            <span class="label-title">
            City
            </span>
            <input type="text" name="city" ng-model="city" placeholder="City">
            </label>

            <label class="input-label">
            <span class="label-title">
            Postcode
            </span>
            <input type="text" name="postcode" ng-model="postcode" placeholder="Postcode">
            </label>

            <label class="input-label">
            <span class="label-title">
            Country
            </span>
            <input type="text" name="country" ng-model="country" placeholder="Country">
            </label>

            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="form-group">
               {{ Form::button('Save Address', array('type'=>'submit', 'class'=>'btn btn-primary', 'style' => 'width:100%;')) }}
            </div>
         </form>
      </div>
      <button ng-click="setStep(2)">Step 2</button>
   </div>
   <div ng-switch-when="2">
      Step 2 - another form
      <button ng-click="setStep(1)">Step 1</button>
      <button ng-click="setStep(3)">Step 3</button>
   </div>
   <div ng-switch-when="3">
      Step 3 - another form
      <button ng-click="setStep(2)">Step 2</button>
   </div>
</div>
</div>

<小时/> 的控制器：

stepCtrl

myApp.controller('stepCtrl',function($scope){
    $scope.step = 1;
    $scope.setStep = function(step){
        $scope.step = step;
    } 
});

postAddressDataCtrl

myApp.controller('postAddressDataCtrl', ['$scope', '$http', 'CSRF_TOKEN', function($scope, $http, CSRF_TOKEN) {
    $scope.urlpath = '{{ url('/') }}';
    $scope.add = function() {
        var line1 = $scope.line1;
        var line2 = $scope.line2;
        var city = $scope.city;
        var postcode = $scope.postcode;
        var country = $scope.country;

        return $http({
            url: "/users/createaddress",
            method: "POST",
            data: {
                'line1': line1,
                'line2': line2,
                'city': city,
                'postcode': postcode,
                'country': country,
                '_token': CSRF_TOKEN
            },
        }).success(function(data, status, headers, config) {
              console.log(data);
              if (data.status == 200) {
                  // move to the next step
              }
        }).error(function(data, status, headers, config) {
              console.log(data);
        });
    };
}]);

如何检查表单中输入的数据是否有效，以及是否可以使用单个按钮在下一步中移动？

当step等于2时，如何将data.status设为200，那么只有这样才会继续？

Answer 1

使用Angular的表单验证。例如，如果您想要字段，请将required添加到输入字段，并为{+ 1}}或ng-minlength添加字符限制。如果您需要在某些字段上进行特定验证，也可以编写custom validation。

要更改步骤，您可以在ng-submit中增加步长变量。要仅在ng-maxlength请求成功时增加，您可以将其直接放在$http函数中。

.success

postAddressDataCtrl

<form url="users/createaddress" ng-submit="add()" novalidate>
    <label class="input-label">
        <span class="label-title">
        Line 1
        </span>
        <input type="text" name="line-1" ng-model="line1" placeholder="Line 1" ng-minlength=3 ng-maxlength=20 required>
    </label>
    <button type="submit" class="btn btn-primary">Save Address</button>
</form>

AngularJS＆amp; Laravel - 向导导航

1 个答案: