Hello all, I am new to AngularJs and encountering an issue with my code.
Currently, my HTML structure looks like this:
<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>
This is how my Controller is structured:
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;
}
};
});
Upon clicking the submit button in the first step of the wizard, I encounter an error in the console stating that $scope.age_form is undefined.
Could anyone provide assistance with this issue?
Thank you so much for your help!