Hide form on submit with Angular JS

Question

Trying to wrap my head around some Angular items and working thru a tutorial to edit and learn.

Clicking the below button shows the below form. How do I reverse this once the form is submitted? Meaning hiding the form on submit until the button is clicked once more.

<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-primary">
    <i class="fa fa-plus"></i>Add Task
</button>

Basically, the form appears, I enter something and submit, but would like the form to dissapear upon submit? Thinking something to do with ng-hide, but can I do this using only Angular? Or do I need to do something with javascript/css?

<div id="addForm" class="margin-full-5">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
    <div class="form-actions">
        <div class="input-group">
            <input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit" ng-click="addTask(taskInput)">
                    <i class="fa fa-plus"></i>&nbsp;Add Task
                </button>
            </div>
        </div>
    </div>
</form>

stravinskii · Accepted Answer · 2015-11-07 18:57:16Z

8

You can also achieve this using a combination of Angular form's attribute $submitted, ng-hide and ng-submit

<form name="myForm" ng-hide="myForm.$submitted" ng-submit="submit()">
    <button>Submit</button>
</form>

Read about it here: https://docs.angularjs.org/api/ng/type/form.FormController

answered Nov 7, 2015 at 18:57

stravinskii

811 silver badge3 bronze badges

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

Comments

Michael J. Calkins · Accepted Answer · 2015-05-11 23:56:01Z

5

Somewhere in your view.

<button ng-click="showTheForm = !showTheForm">Add a Task</button>

<form ng-show="showTheForm" ng-submit="processForm()">
    <button>Submit</button>
    <button type="button" ng-click="showTheForm = false">Cancel</button>
</form>

Somewhere in your controller

$scope.processForm = function() {
    // execute something
    $scope.showTheForm = false;
}

edited May 11, 2015 at 23:56

answered May 11, 2015 at 23:42

Michael J. Calkins

32.7k15 gold badges64 silver badges93 bronze badges

Comments

GrouchyPanda · Accepted Answer · 2015-05-11 23:35:41Z

1

Your form is displaying IF the addNewClicked value evaluates to true, which occurs when you click the add task button. If you want the form to disappear on submit, you just need to make the onClick to that button change your addNewClicked to false.

AngularJS Docs for Ng-If

answered May 11, 2015 at 23:35

GrouchyPanda

1,0848 silver badges20 bronze badges

Comments

kwangsa · Accepted Answer · 2015-05-11 23:38:05Z

1

You can do that by using ng-show/ng-hide as per example below :

<form ng-init="addNewClicked=false; " ng-if="addNewClicked" ng-hide="hideform" id="newTaskForm" class="add-task">

and modify the submit method to make the hideform = true;

$scope.addTask = function(input){
... your things
$scope.hideform = true; 
}

You can also do the same using jQuery :

$("#newTaskForm").hide();

answered May 11, 2015 at 23:38

kwangsa

1,71112 silver badges16 bronze badges

1 Comment

kwangsa Over a year ago

It is possible to use ng-if but if you only want to show/hide it then preferred to use ng-show/ng-hide instead of ng-if as it remove the form from dom object.

Brent Washburne · Accepted Answer · 2015-05-11 23:41:41Z

0

This should do the trick:

$scope.addTask = function(taskInput) {
    ...
    $scope.addNewClicked = false; 
}

answered May 11, 2015 at 23:41

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

Comments

Paul Fitzgerald · Accepted Answer · 2015-05-11 23:49:53Z

0

You could use ng-show as you can see in this jsfiddle

This will show and hide the div element based on clicking the button. When the button is clicked it will toggle the boolean, hence acting as an on/off switch for ng-show

edited May 11, 2015 at 23:49

answered May 11, 2015 at 23:43

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Collectives™ on Stack Overflow

Hide form on submit with Angular JS

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related