javascript - AngularJS表单向导验证

Question

所以我使用 ng-form 指令依赖下一步的链接。但我发现除当前链接外，其他指向后续步骤的链接已启用。

所以我将其更改为使用 ng-disabled 标志。这是我的代码:

index.html

<div class="stepwizard-row setup-panel">
    <div class="stepwizard-step">
        <a ui-sref="step1" type="button" class="btn btn-primary btn-circle active-step-wizard">1</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step1Form.$invalid;" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step2Disabled;" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step3Disabled;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step4Disabled;" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step5Disabled;" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
    </div>
</div>

app.js

$scope.step2Disabled = true;
$scope.step3Disabled = true;
$scope.step4Disabled = true;
$scope.step5Disabled = true;

但是只要当前步骤的表单验证有效，使用此方法就不会启用下一步。我该如何解决这个问题？谢谢

更新

我尝试这个解决方案:

测试 1:

<div class="stepwizard-step">
  <a ng-disabled="step3Disabled;step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
</div>

测试 1 个结果:

它仅在我处于当前步骤时有效，ng-disabled 在表单验证有效时有效

测试 2:

<div class="stepwizard-step">
  <a ng-disabled="step3Disabled || step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
</div>

测试 2 结果:

当我执行上一步时，此步骤的链接已完全禁用。但当我执行此步骤并且表单有效时，下一步的链接仍然处于禁用状态。

Answer 1

你的 Controller 中应该有一个 $scope 变量:

$scope.currentStep = 0;
$scope.enableCount = 0;

那么你就有了一个函数

$scope.changeStep = function(index){
    $scope.currentStep = index;
}

在提交函数中添加以下代码行:

if(form.$valid && $scope.enableCount <= $scope.currentStep) $scope.enableCount++;

然后在你的html中你应该这样做:

<div class="stepwizard-row setup-panel">
    <div class="stepwizard-step">
        <a ui-sref="step1" type="button" ng-click="changeStep(0)" class="btn btn-primary btn-circle active-step-wizard">1</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 1" ng-click="changeStep(1)" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 2" ng-click="changeStep(2)" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 3" ng-click="changeStep(3)" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 4" ng-click="changeStep(4)" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 5" ng-click="changeStep(5)" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
    </div>
</div>