AngularJs Wizard Validation Inputfield can't find scope

i'm new in AngularJs and have a problem with my code.

At the moment my HTML looks like:

<div class="wizardContainer">
<wizard on-finish="finishedWizard()">
    <wz-step title="1">
        <h1>Question 1</h1>
        <p>How old are you?</p>
        <form name="age_form" novalidate ng-submit="signupForm()">
            <fieldset>
                <input type="text" name="age" ng-model="user.age"
                       ng-minlength=1 required>

                <div class="error-container"
                     ng-show="age_form.age.$invalid && age_form.submitted">
                    <small class="error"
                           ng-show="age_form.age.$error.required">
                        Please fill in the field
                    </small>
                    <small class="error"
                           ng-show="age_form.age.$error.minlength">
                        Please fill in mininum 1 number
                    </small>
                </div>
                <button type="submit" class="btn btn-default full-width">go on</span></button>
            </fieldset>
        </form>
    </wz-step>
    <wz-step title="2">
        <h1>Question 2</h1>
        <p>How are you?</p>
    </wz-step>
</wizard>

and my Controller looks like:

angular.module('ngBoilerplate.about', [
    'ui.router',
    'placeholders',
    'ui.bootstrap',
    'mgo-angular-wizard'
])

.config(function config($stateProvider) {
    $stateProvider.state('about', {
        url: '/about',
        views: {
            "main": {
                controller: 'AboutCtrl',
                templateUrl: 'about/about.tpl.html'
            }
        },
        data: { pageTitle: 'What is It?' }
    });
})

.controller('AboutCtrl', function AboutCtrl($scope) {

    $scope.user = {};

    $scope.submitted = false;

    $scope.signupForm = function() {
      if ($scope.age_form.$valid) {
          window.location="#/about";
      } else {
        $scope.age_form.submitted = true;
      }
    };
});

If i click on the submit button in the first step of the wizard i get an error in the console with the message : $scope.age_form is undefined

Can anybody help me with this problem?

Thanks a lot for your answers!

Answers:

Answer

The angular wizard project currently has scoping problems. I was able to solve it at the post, below.

Trying to get form validations to work with an Angular Wizard
I'm trying to get form validations to work with an Angular Wizard

However, this is a temporary fix. The project definitely needs to be reworked.

It's all tied to this issue on github.

Step validation?!
https://github.com/mgonto/angular-wizard/issues/41

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.