Learn to Create Forms in AngularJS

0
1694
Forms

Forms

In this lesson we’re going to create a simple interactive form which saves user data in the ‘backstage’ using AngularJS. We are going to use the HTML input-control elements – input, select, button etc – to allow for data binding with the ng-model directive. The ng-model binds the property to the application(and controller) so that it can be used ‘backstage’ as well as in the view.

We want to be able to save our user’s first name and surname, whether or not they subscribed, and their preferred method of delivery.
Lets start with the script, by defining a new app, controller, and default values for our user data array:

We’ve created a user property which is an array containing objects of 4 key-value pairs each. The ‘fname’ key is for the first name, the ‘surname’ key for the surname, the ‘subscribe’ key for ‘subscribed’ or ‘not subscribed’ and so on…

Lets start writing the HTML.

We gave the form a name so we can reference it, and we used the ng-submit directive to indicate where we want to save our data whenever a user submits the form. the ng-submit directive indicates that a specific function should be triggered when the submit button is clicked. In this case the function is updateU which takes a parameter called Udata.

Here we are requiring that a value be provided for the first name field and that it’s at least 2 characters long. The ng-required directive is set to true to indicate the field is a required one.

This span is what’s going to show if the user enters erroneous input.
The ng-show directive shows or hides an element. form1.fname.$dirty
&& form1.fname.$error.required is the condition that needs to be true in order for the message to display. $dirty indicates that the field has been changed. This condition has to be true as well as the condition that the field is required.

This is another error checking span. Again, we are checking that the field has been changed and the error is that the input is less than 2 characters long.

https://blogeduonix-2f3a.kxcdn.com/wp-content/uploads/2015/10/Learn-Javascript-And-JQuery-From-Scratch.png

We are going to follow the same steps for the surname:

With this we’re finished with our text field validation. On to check box validation:

If the check box is checked the value we will save is ‘subscribed’. Otherwise the value will be ‘not subscribed’. ng-true-value sets the value when the box is selected. ng-false-value sets the value when the box is not selected.

We are creating a required field where the user needs to specify their method of delivery.

This is the submit button. the ng-disabled directive specifies a condition under which the submission will be disabled. In our case, that condition is that form1 contains required fields with no input.

We have used ng-repeat to output our data to the user.
We’re going to finish off by going back to our script and create the updateU function:

When the function updateU is triggered, it takes Udata in as a parameter. Udata is an object containing the current user’s data/selections. If our form is valid (all required fields filled), we are adding the data in updateU into our user array in the form of a new array (object) item.
forms

Conclusion
To summarize, we’ve demonstrated how useful Angular can be in creating forms with a simple interactive form which saves user data. In doing so, we used HTML input-control elements in combination with the ng-model directive to allow for data binding. In the process, we’ve learned about Angular directives which greatly simplify the creation of interactive forms such as ng-submit, ng-show and ng-false-value/ng-true-value.

LEAVE A REPLY

Please enter your comment!
Please enter your name here