How to hide form after ng-submit in Angular JS

Question

I have a form on my index that takes the input of a name. Upon submission of the name using ng-submit, I want to hide the form, then show another div which isn't currently hidden below. I have tried adding in a button to the form to set an ng-click and to show on click but cannot get it working (I took the button out) and just have the submit input.

HTML

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

Controller

app.controller('mainController', function($scope) {

    this.newName = { name: '' };

    this.names = this.names || [
        { name: ' ' },
    ];

    this.addName = function() {

        this.names.push({
            name: this.newName.name
        });

        this.newName.name = null;
    };
    return this;
});

Any explanation or help would be greatly appreciated.

Poyraz Yilmaz · Accepted Answer · 2015-10-29 18:31:47Z

1

You can use ng-if or ng-show/hide directive for showing and hiding div depends on expression...

so first add this directive to part of html you want to show and hide and give them same expression...

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-hide="mainCtrl.hideForm">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-show="mainCtrl.hideForm">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

then in your controller just set hideForm variable true so form will be hidden and second step will be shown...

this.addName = function() {

    this.names.push({
        name: this.newName.name
    });

    this.newName.name = null;

    // hide form
    this.hideForm = true;

};

answered Oct 29, 2015 at 18:31

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

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

2 Comments

luke Over a year ago

Awesome, thanks for the explanation too. Having trouble showing the form input once the steptwo div appears. I have the output showing up in another view, but can't show it on the same view....any ideas? thanks again!

luke Over a year ago

Got it figured out. Thanks again for the solution.

Miha2255 · Accepted Answer · 2015-10-29 18:25:28Z

0

HTML:

 <form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-if="hide">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-if="!hide">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

Controller:

app.controller('mainController', function($scope) {
$scope.hide = false;
this.newName = { name: '' };

this.names = this.names || [
    { name: ' ' },
];

this.addName = function() {

    this.names.push({
        name: this.newName.name
    });

    this.newName.name = null;
};
$scope.hide = true;
return this;

});

answered Oct 29, 2015 at 18:25

Miha2255

615 bronze badges

2 Comments

Gonzalo.- Over a year ago

I think the $scope.hide = true should be inside the addName function, because he wants to hide the Div after submitting it. Also, point out the differences of using ng-if and ng-show/hide

luke Over a year ago

Correct. I had to put the $scope.hide = true within the addName function so that the div hides upon ng-submit

swapnesh · Accepted Answer · 2015-10-29 18:30:20Z

0

You can use ng-if or ng-show or ng-hide on your <form> tag and control the value from controller.

answered Oct 29, 2015 at 18:30

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

Comments

Harshal Carpenter · Accepted Answer · 2015-10-29 18:31:30Z

HTML File:

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-hide="hide">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
    <input type="button" ng-click="{{hide=true}}">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-show="hide">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

JavaScript file:

app.controller('mainController', function($scope) {
    $scope.hide = false;
    this.newName = { name: '' };

    this.names = this.names || [
        { name: ' ' },
    ];

    this.addName = function() {

        this.names.push({
            name: this.newName.name
        });

        this.newName.name = null;
    };
    return this;
});

Collectives™ on Stack Overflow

How to hide form after ng-submit in Angular JS

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related