CODEWITHSUNDEEP
angularjs
Raimonds
Raimonds

Reputation: 537

Angular dynamically generated form validation

I am slowly advancing into angular. At this point I have form with several steps, each step is made of ng-form, since each step contains "continue" button and common headers I have following loop

    <section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}">
        <h1 class="header">{{$index + 1}}. {{step.title}}</h1>
        <div class="content">
            <ng-include src="step.template"></ng-include>
        </div>

        <!--and button code-->
        <div class="content-body" ng-show="currentSection == $index">
            <button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button>

            <button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button>
            <div style="clear: both;"> </div>
        </div>
    </section>

So in that way I am not repeating same buttons code for each ng-form.

Before that I was using only ng-include and sections were hard coded, I suppose I am missing $scope now, as ng-include creates one as well as ng-repeat, could someone advise me on how can I make Continue button dependant on each ng-form validation result? (How can I access each individual ng-form results in topmost $scope?)

Upvotes: 0

Views: 68

Answers (2)

Matuszew
Matuszew

Reputation: 851

If you want to disable button if one of the forms is invalid

How can I access each individual ng-form results in topmost $scope?

You can wrap ng-repeat in ng-form and top ng-form will be invalid if any child form in ng-repeat is invalid.

Or if you wan't to block button per form then 

   <button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>

Upvotes: 0

rrd
rrd

Reputation: 5957

Each button has access to that form's $error, so you could have this for example:

<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">

You also have ng-form spelled incorrectly (ng-from), although I assume that was an artifact from you pasting/typing in.

Upvotes: 1

Related Questions