How to close the form after submit Angular JS

Question

I am trying to use validation for the form using Angular JS. The code works partially. The submit button remains disabled unless I add fill up all the text boxes. Error messages also gets displayed when I don't fill a text box.

My problem is ,when I fill up all the text boxes and click submit, the user gets added, but all the text boxes clear up and displays error messages. How do I force close the form on clicking the submit button? Thanks in advance.

 if ($scope.addForm.$valid) {
        alert('all inputs are valid ');
    }
    else {
        alert('all inputs are not valid ');
    }

    $scope.saveUser = function () {
        console.log("Saving...");
        $scope.users.push($scope.newUser);
        $scope.info = "New User Added Successfully!";
        $scope.newUser = {};
        localStorage.setItem("users", JSON.stringify($scope.users));
    };

<div class="modal-body">
    <form name="addForm"class="form-horizontal" action="/action_page.php" novalidate>

        <div class="form-group">
            <label class="control-label col-sm-2">Email</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addEmail.$invalid && !addForm.addEmail.$pristine }">
                <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" ng-required="true">
                <span class="help-block" ng-show="addForm.addEmail.$invalid && !addForm.addEmail.$pristine">
                    Your Email is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Password</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addPassword.$invalid && !addForm.addPassword.$pristine }">
                <input type="password" class="form-control" name="addPassword" placeholder="Enter New Password" ng-model="newUser.password" ng-required="true">
                <span class="help-block" ng-show="addForm.addPassword.$invalid && !addForm.addPassword.$pristine">
                    Your Password is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">First Name</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addFirstName.$invalid && !addForm.addFirstName.$pristine }">
                <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" ng-required="true">
                <span class="help-block" ng-show="addForm.addFirstName.$invalid && !addForm.addFirstName.$pristine">
                    Your First Name is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Last Name</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addLastName.$invalid && !addForm.addLastName.$pristine }">
                <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" ng-required="true">
                <span class="help-block" ng-show="addForm.addLastName.$invalid && !addForm.addLastName.$pristine">
                    Your Last Name is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Contact</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addContact.$invalid && !addForm.addContact.$pristine }">
                <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" ng-required="true">
                <span class="help-block" ng-show="addForm.addContact.$invalid && !addForm.addContact.$pristine">
                    Your Contact is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Role</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addRole.$invalid && !addForm.addRole.$pristine }">
                <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" ng-required="true">
                <span class="help-block" ng-show="addForm.addRole.$invalid && !addForm.addRole.$pristine">
                    Your Role is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Company</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addCompany.$invalid && !addForm.addCompany.$pristine }">
                <select class="form-control" name="addCompany" placeholder="Select Company" ng-options="company for company in companies" ng-model="newUser.company" ng-required="true">
                </select>
                <span class="help-block" ng-show="addForm.addCompany.$invalid && !addForm.addCompany.$pristine">
                    Your Company is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" ng-disabled="!addForm.$valid" ng-click="saveUser()" data-dismiss="modal">Submit</button>
            </div>
        </div>
    </form>
</div>

---

Update

hmm, look at my code here now: everything looks ok plnkr.co/edit/61khc9EEKZYFvTiTFb3i?p=preview

Answer 1

Do i understand correctly - you want to clear form after submit and add user? If so, you can make clear function, which will clear all ng-model data, like here:

   $scope.formSubmit = function (user){
     $scope.users = [];
     console.log(user)
     $scope.users.push(user);
     console.log("Users",$scope.users)
}
$scope.clearSearch = function() {
   $scope.user = null;
}

HTML:

<button type="submit" class="btn btn-default" ng-click="formSubmit(user);clearSearch()" >Submit</button>

EDIT: Add to your submit button data-dismiss="modal" Also add ng-if for valid inputs :

 <div class="modal-body">
                 <form name="addForm"class="form-horizontal" novalidate>
          <h2 class="form-signin-heading">Please sign in</h2>
          <div class="form-group">
            <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" data-ng-model="user.email ">
          </div>
          <div class="form-group">
            <input class="form-control" placeholder="Password" type="password" data-ng-model="user.password" >
          </div>

            <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit"  class="btn btn-default" ng-click="formSubmit(user);clearSearch()" data-dismiss="modal">Submit</button>
          </div>
          </div>
          </form>
      </div>

plunker: http://plnkr.co/edit/tulZ7L9RH69kMt6bDEgt?p=preview

Answer 2

Delete the action attribute and submit the data using the $http service:

<form name="addForm"class="form-horizontal" ̶a̶c̶t̶i̶o̶n̶=̶"̶/̶a̶c̶t̶i̶o̶n̶_̶p̶a̶g̶e̶.̶p̶h̶p̶"̶  novalidate>

    <div class="form-group">
        <label class="control-label col-sm-2">Email</label>
        <div class="col-sm-10"
             ng-class="{ 'has-error' : addForm.addEmail.$invalid && !addForm.addEmail.$pristine }">
            <input type="email" class="form-control" name="addEmail"
                   placeholder="Enter Email" ng-model="newUser.email"
                   ng-required="true">
            <span class="help-block"
                  ng-show="addForm.addEmail.$invalid && !addForm.addEmail.$pristine">
                Your Email is required.
            </span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default"
                    ng-disabled="!addForm.$valid"
                    ng-click="saveUser()" data-dismiss="modal">
              Submit
            </button>
        </div>
    </div>
</form>

When the form has an action attribute, the browser does a full page reload from the server. This restarts the app and its controller, resulting in the clearing of the form.

For more information, see

• AngularJS <form> Directive API Reference - Submitting a form and preventing the default action
• AngularJS Developer Guide - Forms