Hide form on submit with Angular JS


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

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

Problem courtesy of: RonnieT


Somewhere in your view.

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

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

Somewhere in your controller

$scope.processForm = function() {
    // execute something
    $scope.showTheForm = false;
Solution courtesy of: Michael J. Calkins


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 :

Discussion courtesy of: kwan245

This should do the trick:

$scope.addTask = function(taskInput) {
    $scope.addNewClicked = false; 
Discussion courtesy of: Brent Washburne

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

Discussion courtesy of: Paul Fitzgerald

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()">

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

Discussion courtesy of: stravinskii

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

Discussion courtesy of: GrouchyPanda

This recipe can be found in it's original form on Stack Over Flow.