AngularJs向导验证输入字段无法找到范围

时间:2014-07-11 10:55:57

标签: javascript angularjs validation wizard ngboilerplate

我是AngularJs的新手,并且我的代码有问题。

目前我的HTML看起来像:

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

我的控制器看起来像:

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;
      }
    };
});

如果我在向导的第一步中点击提交按钮,我在控制台中收到一条错误信息:$ scope.age_form is undefined

有人可以帮我解决这个问题吗?

非常感谢您的回答!

1 个答案:

答案 0 :(得分:0)

角度向导项目目前存在范围问题。我能够在下面的帖子中解决它。

尝试获取表单验证以使用角度向导为I'm trying to get form validations to work with an Angular Wizard

但是,这是一个临时修复。该项目肯定需要重新设计。

这一切都与github上的这个问题有关。

步骤验证?!
https://github.com/mgonto/angular-wizard/issues/41