角度 - 多步形式

Question

我有一個問題與角js。我使用ng-disabled =「userForm。$無效「，但問題是他在其他表單步驟中捕獲所有其他輸入。如何驗證。

在此先感謝和抱歉我的英語！

app.js

var validationApp = angular.module('validationApp', []).config(function ($interpolateProvider) { 
    $interpolateProvider.startSymbol('<%').endSymbol('%>'); 
}); 

validationApp.controller('mainController', function ($scope, $compile) { 
    $scope.log = function() { 
     console.log($scope.userForm); 
    }; 
    /* 
    * If is selected partnership will show button for adding partners. 
    */ 
    $(".category").click(function() { 
     var value = $(".category option:selected").val(); 
     var token = $('.csrf').val(); 
     var solo = 1; 
     var partnership = 2; 

     if (value == solo || value == '') { 
      $('.partner-button').hide(); 
      $('.inputs').remove(); 
     } else if (value == partnership) { 
      $('.partner-button').show(); 
      //$(".input_fields_wrap").append(fields); 
      //$compile(fields)($scope); 
     } 
    }); 

    /* 
    * Adding fields for partner. 
    */ 

    var count = 0; 
    $('.add_field_button').click(function (e) { 

     e.preventDefault(); 
     var input = $("<div class=\"inputs\">" + 
      "<input type=\"text\" ng-model=\"partnerName" + count + "\" name=\"partners[" + count + "][name]\" placeholder=\"Наименование на партньор\" required/>" + 
      "<p ng-show=\"userForm['partners[" + count + "][name]'].$error.required\" class=\"errors\">Наименованието на партньора е задалжително</p>" + 
      "<input type=\"text\" ng-model=\"partnerUrn" + count + "\" name=\"partners[" + count + "][urn]\" placeholder=\"БУЛСТАТ (ЕИК) на партньора\" required>" + 
      "<p ng-show=\"userForm['partners[" + count + "][urn]'].$error.required\" class=\"errors\">Полето БУЛСТАТ е задалжително</p>" + 
      "<br><a href=\"#\" class=\"font remove_field\">Премахни</a>" + 
      "</div>"); 
     count++; 
     $(".input_fields_wrap").append(input); 
     $compile(input)($scope); 


    }); 

    $('.input_fields_wrap').on("click", ".remove_field", function (e) { //user click on remove text 
     e.preventDefault(); 
     $(this).parent('div').remove(); 
     count--; 
    }); 
}); 

HTML表單第一步

<fieldset> 
<h2 class="fs-title">ПРОВЕРКА НА КАНДИДАТ</h2> 

<div class="application-type"> 
    <h2 class="fs-title">Тип на кандидатстване: </h2> 
    <select 
      name="category" 
      class="category" 
      ng-model="category" 
      required 
      > 
     <option value="">Изберете тип на кандидатстване</option> 
     <option value="1">Самостоятелно</option> 
     <option value="2">В партньорство</option> 
    </select> 

    <p ng-show="userForm.category.$error.required" class="errors">Моля изберете тип на кандидатстване</p> 
</div> 
<p> 
    <input type="text" 
      name="urn" 
      placeholder="БУЛСТАТ(ЕИК)" 
      ng-model="urn" 
      ng-minlength="9" 
      ng-maxlength="13" 
      required 
      ng-class="{ 'has-error' : userForm.urn.$invalid && !userForm.urn.$pristine }"/> 

<p ng-show="userForm.urn.$error.required" class="errors">Полето БУЛСТАТ е задалжително</p> 

<p ng-show="userForm.urn.$error.minlength" class="errors">Невалиден БУЛСТАТ</p> 

<p ng-show="userForm.urn.$error.maxlength" class="errors">Невалиден БУЛСТАТ</p> 
</p> 



<div class="input_fields_wrap"></div> 
<button class="partner-button action-button add_field_button">Добави партньор</button> 

<input type="button" name="next" class="next action-button" ng-disabled="userForm.$invalid" value="Напред"/> 

<div class="g-recaptcha" data-sitekey="6LfUWRkTAAAAABPcgj4QN-LZzrmv4ZvGDqNGInxN"></div> 

Answer 1

你可以使用ngForm這是「別名」（如果不考慮）的form，以便將這些步驟組合在一起。

這樣每個ngForm與定義的名稱，很像形式，會得到自己的形式，因此，控制器允許你使用ng-disabled="firstStep.$invalid"，ng-disabled="secondStep.$invalid"等