Проверка мастера формы angularjs

Поэтому я использую ссылку на следующий шаг, используя директиву ng-form. Но я обнаружил, что другая ссылка на следующие шаги, кроме текущего, enabled.

Поэтому я изменил его, чтобы использовать флаг для 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;

Но использование этого подхода не будет enabled следующим шагом, если проверка формы текущего шага действительна. Как мне это решить? спасибо

ОБНОВЛЕНИЕ

Я пробую это решение:

тест 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:

Когда я на предыдущем шаге, ссылка на этот шаг полностью отключена. Но ссылка на следующий шаг по-прежнему отключена, когда я нахожусь на этом шаге и форма действительна.


javascript validation angularjs formwizard
person Kris MP    schedule 20.08.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы не можете выполнить проверку всей формы. Вам нужно проверить каждый ввод на $invalid. Возможно, вы создадите функцию или что-то еще, что будет проверять каждый ввод вашей формы.

Изменить: я ответил неправильно. Извините ^^. Так что это будет решением вашей проблемы: https://jsbin.com/sojejunazo/edit

person noaaah    schedule 20.08.2015
comment
Можете ли вы привести пример? - person Kris MP; 21.08.2015
comment
Привет, спасибо за помощь: D. Ваше решение ближе к тому, что мне нужно. Итак, что мне нужно, я хочу, чтобы ссылка на следующий шаг была включена, когда форма действительна, точно так же, как ng-form и ng-disabled. поэтому он не будет запускаться при отправке формы. Пожалуйста, смотрите мой обновленный вопрос - person Kris MP; 21.08.2015

arrow_upward
0
arrow_downward

у вас должна быть переменная $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>
person Shimon Brandsdorfer    schedule 20.08.2015
comment
извините, я вижу, вам это нужно без функции отправки. - person Shimon Brandsdorfer; 21.08.2015
comment
привет, спасибо за ответ: D, но я думаю, что это срабатывает только при отправке кнопки. есть ли способ включить/отключить, когда форма действительна? - person Kris MP; 21.08.2015
comment
возможно, вы можете следить за правильностью форм, но это требует больших вычислительных ресурсов. придумал бы другую идею - person Shimon Brandsdorfer; 21.08.2015
comment
@ShimonBrandsdorfer Вы получили ответ? - person Bhoomi Bhalani; 03.08.2017
comment
Я не оригинальный ПО - person Shimon Brandsdorfer; 03.08.2017