Second variable in AngularJS not defined but declared in the same way

Question

I extend a web-form, written in HTML and AngularJS. After some registration info is filled into the form, the form must disappear and simultaneously a div with confirmed has to appear. Hiding the form after registration works correct but showing the confirmed div doesn't work because of conformationShown is not defined while this variable is declared in the same manner as formHidden. These variables are declared in the file "labController.js".

index.html





    Tony's Pizza - New User Registration
    



    
        New User Registration

        
            
                
                    Username
                
                
                    
                    
                        Username is required
                    
                
            
            
                
                    Password
                
                
                    
                    
                        Password is required
                    
                
            
            
                
                    Name
                
                
                    
                    
                        Name is required
                    
                
            
            
                
                    Phone Number
                
                
                    
                    
                        Phone is required
                    
                
            
            
                
                    Email Address
                
                
                    
                    
                        Email Address is required
                    
                
            
            
                
                    Favorite Pizza
                
                
                    
                    
                        Favorite is required
                    
                
            
            
                Confirmed!
            
            
                
                    
                    
                
            
        

        {{model | json}}

labController.js

app.controller('labController', [
    '$scope', 'registration',
    function ($scope, registration) {

        var formHidden = false;
        var conformationShown = false;

        $scope.formHidden = formHidden;
        $scope.conformationShown = conformationShown;
        $scope.reset = reset;
        $scope.submit = submit;

        reset();

        function submit(model) {
            registration.submit(model).$promise
                .then(function (response) {
                    alert('User registered');
                    $scope.formHidden = true;
                    $scope.conformationShown = true;
                    console.log(conformationShown);

                },
                function (response) {
                    alert('An error occured');
                });
        }

        function reset() {
            $scope.model = {};
        }
    }
]);

registrationServices.js

angular.module('registrationService', ['ngResource']).
    factory('registration', [
        '$resource',
        function ($resource) {
            return $resource('https://reqres.in/api/register',
                {},
                {
                    submit: {
                        method: 'POST'
                    },
                });
        }
    ]);

app.js

var app = angular.module('app',
    [
        'ngResource',
        'registrationService'
    ]
);

Michael Doye · Accepted Answer

You will need to move your success alert outside of your form:


    ...



  Confirmed!

Eample Plunkr

Second variable in AngularJS not defined but declared in the same way

Answers (1)

Related Questions