Sharing Top Content from the Angular-sphere.

Angular – clear form input after submit #Angular #AngularJS

  • I have a simple form like so:

    with my controller as follows:

    what I’d like to do is clear the text input after submission so I simply clear the model value:

    Except now, because the form input is ‘required’ I get a red border around the form input.

  • This is the correct behaviour, but not what I want in this scenario… so instead I’d like to clear the input and then blur the input element.
  • Which leads me to:

    Now, I know that modifying the DOM from the controller like this is frowned upon in the Angular documentation – but is there a more Angular way of doing this?

When you give a name to your form it automatically gets added to the $scope.

So if you change your form name to “addForm” (’cause I don’t think add-from is a valid name for angular, not sure why), you’ll have a reference to $scope.addForm.

If you use angular 1.1.1 or above, you’ll have a $setPristine() method on the $scope.addForm. which should recursively take care of resetting your form. or if you don’t want to use the 1.1.x versions, you can look at the source and emulate it.


@angular_recipe: Angular – clear form input after submit #Angular #AngularJS

I have a simple form like so:

with my controller as follows:

what I’d like to do is clear the text input after submission so I simply clear the model value:

Except now, because the form input is ‘required’ I get a red border around the form input. This is the correct behaviour, but not what I want in this scenario… so instead I’d like to clear the input and then blur the input element. Which leads me to:

Now, I know that modifying the DOM from the controller like this is frowned upon in the Angular documentation – but is there a more Angular way of doing this?

. which should recursively take care of resetting your form. or if you don’t want to use the 1.1.x versions, you can look at the source and emulate it.

For those not switching over to 1.1.1 yet, here is a directive that will blur when a $scope property changes:

The controller must now change a property whenever a submit occurs. But at least we’re not doing DOM manipulation in a controller, and we don’t have to look up the element by ID:

HTML:

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Angular

Comments are closed, but trackbacks and pingbacks are open.