CODEWITHSUNDEEP
javascripthtmlangularjsforms
RonnieT
RonnieT

Reputation: 2203

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
</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>

Upvotes: 4

Views: 10923

Answers (6)

stravinskii
stravinskii

Reputation: 81

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

Upvotes: 8

Michael J. Calkins
Michael J. Calkins

Reputation: 32683

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;
}

Upvotes: 5

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

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

Upvotes: 0

Brent Washburne
Brent Washburne

Reputation: 13158

This should do the trick:

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

Upvotes: 0

kwangsa
kwangsa

Reputation: 1711

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

Upvotes: 1

GrouchyPanda
GrouchyPanda

Reputation: 1084

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

Upvotes: 1

Related Questions