Geek Answers Handbook

Hide form when submitting using Angular JS

Trying to wrap your head around some Angular elements and work through a tutorial for editing and learning.

Clicking the button below shows the form below. How do I cancel this after submitting the form? The value to hide the form when submitting until the button is pressed again.

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

Basically, a form appears, I enter and submit something, but would like the form to disappear after submitting? I'm thinking of doing something 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>

+4
source share
6 answers

Somewhere in your opinion.

<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;
}
+5
source

, Angular $submitted, ng-hide ng-submit

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

: https://docs.angularjs.org/api/ng/type/form.FormController

+8

, addNewClicked true, , . , , onClick , addNewClicked false.

AngularJS Docs Ng-If

+1

, ng-show/ng-hide, :

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

, hideform = true;

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

jQuery:

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

:

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

ng-show, jsfiddle

This will display and hide the div element based on the click of a button. When the button is pressed, it switches the logical value, therefore, acts as an on / off switch forng-show

0
source

More articles:


All Articles