Introduction: Usually, many websites provide relevant kinds of information and also supportive submit buttons like one or more than one also to proceed further.
- Users will be asked to fill out the form and there are options in the form of submit buttons like “submit the form”, “Clear out the fields” or even “Links to similar pages” etc.
- In the main opening page of any websites, we can see “Register with Email“, “Login”, “Login via Google”, “Login via Facebook” etc.,
Each submits need to be handled in such a way that they need to do their respective action. In this article, let us see how we can do that via AngularJS by our following examples.
Explanation of ng controls:
- ng-app: Our root element and it is a simple app.
- We define a controller with a variable exposed on its instance called username as well as password.
- We pointed the value for the ng-model at the same username variable on the MainCtrl.
- Hence any changes in the input box will update the model in our controller.
- When the value of the variable changes in the controller, the input field gets the value updated automatically.
- We can clearly see that code is not using any id or CSS, because of this ng-model, values are getting updated automatically
- ng-click->On button click actions need to be performed.
- Two separate functions are written, one for clearing vales and another for submit. Hence, clean separation is happening via these different functions. Like this “n” number of functions can be written and divert the functionality according to the requirements.
The advantage is the controller has never reached out in UI, no JQuery selector, no findElementById, etc involved. On updating model fields in the controller, UI is updated and also latest values can be grabbed in a nice AngularJS way.
On click of “Clear Values”, the output is seen as shown in the image
On click of “Submit”, the output is seen as shown in the image
Example 2: In the below example, multiple submits are happen via two different forms and two submit buttons. i.e. “ng-submit” is used instead of button controls.
In the first form, the username and password are directly on the controller whereas, for the second form, they are bound to a user object in the controller. Hence, while submitting the form, the output code differs a little. i.e. for the second form, we can directly access as self.user because For the second form, our ng-model is mainctrl.user.username and mainctrl.user.password.
So, during form2 submit, we can get the value as self.user. In both ways, we can prefer. But if we bound to an object, all the contents of the form are accessed via that object easily.
- On click of “Form 1 Submit” output is shown as
- On click of “Form 2 Submit” output is shown as
While verifying the output of both forms submits, Form 2 Submit provides an easier way of Accessing model objects.
Conclusion: AngularJS is very user-friendly and as it provides MVC framework, the clean neat user interface in HTML, two-way binding, etc., Depends upon the requirements, we can handle events for different submit buttons easily and divert the flow accordingly.