Clear an input field on form submit in Angular?

Question

I've gathered that $setPristine is supposed to do this, but it isn't on my project. This is my form:

form(name="new_project", ng-submit="create_project()")
    div.create_wrapper
        input#project_name(required, ng-model="project.name", type="text")
        select#project_language(required, ng-init="project.language='PHP'", ng-model="project.language", ng-options="language for language in languages")
        input.button.tiny.radius(type="submit", value="Create")

And the js:

$scope.create_project = () ->
    project = new projectFactory this.project
    project.$save project, (form_data) ->
        $scope.projects.push form_data
        $scope.new_project.$setPristine()

There are no errors, and pristine is set to true, but the inputs value remains.

See answer here: stackoverflow.com/a/20010290/781707

Davin Tryon
– Davin Tryon

2013-12-27 23:44:33 +00:00
Commented Dec 27, 2013 at 23:44 — Davin Tryon
– Davin Tryon, Commented Dec 27, 2013 at 23:44

Joren · Accepted Answer · 2014-01-03 00:50:36Z

19

Gonna leave this here, since that other question is poorly named for finding the solution to this problem.

You have to manually clear the values of the form elements.

For example, if you have:

input#project_name(ng-model="project.name", type="text")

To empty it you could do:

$scope.project = null

in your controller.

answered Jan 3, 2014 at 0:50

Joren

9,95520 gold badges67 silver badges106 bronze badges

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

1 Comment

Blazemonger Over a year ago

or delete $scope.project

Vladyslav Babenko · Accepted Answer · 2014-12-26 17:07:15Z

0

You can user your own method but with some improvement. For example, This is your model into controller:

    $scope.registrationForm = {
    'firstName'     : '',
    'lastName'      : ''
};

Your HTML:

<form class="form-horizontal" name="registrForm" role="form">
   <input type="text" class="form-control"
                       name="firstName"
                       id="firstName"
                       ng-model="registrationForm.firstName"
                       placeholder="First name"
                       required> First name
   <input type="text" class="form-control"
                       name="lastName"
                       id="lastName"
                       ng-model="registrationForm.lastName"
                       placeholder="Last name"
                       required> Last name
</form

Then, you should clone/save your clear state by:

$scope.originForm = angular.copy($scope.registrationForm);

Your reset function will be:

$scope.resetForm = function(){
    $scope.registrationForm = angular.copy($scope.originForm); // Assign clear state to modified form 
    $scope.registrForm.$setPristine(); // this line will update status of your form, but will not clean your data, where `registrForm` - name of form.
};

In such way you are able to clean up the whole your form

answered Dec 26, 2014 at 17:07

Vladyslav Babenko

1,37918 silver badges26 bronze badges

2 Comments

Joren Over a year ago

Wouldn't you achieve the same thing by using an object to store your form data, but then overwriting it with an empty object when you wanted to clear? That way you don't have to type out a blank version of your object to maintain.

Vladyslav Babenko Over a year ago

@Joren, you are right, it's possible to assign an empty object instead of angular.copy and a result will be the same

Collectives™ on Stack Overflow

Clear an input field on form submit in Angular?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related