Angular dynamically generated form validation

Question

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?)

rrd · Accepted Answer · 2016-12-15 14:53:08Z

1

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.

answered Dec 15, 2016 at 14:53

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raimonds Over a year ago

Unfortunately I did spelled it wrong, given example works fine, as expected

Matuszew · Accepted Answer · 2016-12-15 14:55:45Z

0

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>

answered Dec 15, 2016 at 14:55

Matuszew

8515 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular dynamically generated form validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related