Angular JS Forms, Input, and Services:
Working with ng-model:
In the past part, we saw the ng-tie mandate or its proportionate twofold wavy documentation, which enabled us to take the information from our controllers and show it in the UI. That gives us our single direction information authoritative, which is amazing in its respect. In any case, most applications we grow additionally have client associations and parts where the client needs to encourage in the information. From enlistment structures to profile data, structures are a staple of web applications, and AngularJS gives the ng-model mandate to us to manage sources of info and two-way information authoritative:
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<input type="text" ng-model="ctrl.username"/>
You typed {{ctrl.username}}
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
this.username = 'nothing';
}]);
</script>
</body>
</html>
In this model, we characterize a controller with a variable uncovered on its case called username. Presently, we get its incentive out into the HTML utilizing the ng-controller and the twofold wavy punctuation for a single direction information official. What we have presented additionally is an information component. It is a plain content box, however, on it, we have connected the ng-model mandate.
 |
| Angular JS - Forms |
Leverage Data Binding and Forms:
When designing your forms and deciding which fields to bind the ng-model to, you should always consider what format you need the data in. Let’s take the following example to demonstrate:
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit1()">
<input type="text" ng-model="ctrl.username">
<input type="password" ng-model="ctrl.password">
<input type="submit" value="Submit">
</form>
<form ng-submit="ctrl.submit2()">
<input type="text" ng-model="ctrl.user.username">
<input type="password" ng-model="ctrl.user.password">
<input type="submit" value="Submit">
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit1 = function() {
// Create user object to send to the server
var user = {username: self.username, password: self.password};
console.log('First form submit with ', user);
};
self.submit2 = function() {
console.log('Second form submit with ', self.user);
};
}]);
</script>
</body>
</html>
There are two forms in this example, both in the same fields. The first form is bound to a username and password directly on the controller, while the second form is bound to a username and password key on a user object in the controller. Both of them trigger an ng-submit function on the submission of a function. Now in the case of the first form, we have to take those fields from the controller and put them into an object, or something similar, before we can send it to the server. In the second case, we can directly take the user object from the controller and pass it around.
The second flow makes more sense because we are directly modeling how we want to represent the form as an object in the controller. This removes any additional work we might have to do when we work with the values of the form.
Form Validation and States:
We have seen how to create forms, and enable (and leverage) data-binding to get our data in and out of the UI. Now let’s proceed to see how else AngularJS can benefit us when working with forms, and especially with validation and various states of the forms and inputs:
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<input type="text"
ng-model="ctrl.user.username"
required
ng-minlength="4">
<input type="password"
ng-model="ctrl.user.password"
required>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit = function() {
console.log('User clicked submit with ', self.user);
};
}]);
</script>
</body>
</html>
In this example, we reworked our old example to add some validation. In particular, we want to disable the Submit button if the user has not filled out all the required fields. How do we accomplish this?
- We give the form a name, which we can refer to later. In this case, it is myForm.
- We leverage HTML5 validation tags and add the required attribute to each input field.
- We add a validator, ng-minlength, which enforces that the minimum length of the value in the input field for the username is four characters.
- On the Submit button, we add an ng-disabled directive. This disables the element if the condition is true.
- For the disable condition, we leverage the form, which exposes a controller with the current state of the form. In this case, we tell the button to disable itself if the form with the name myForm is $invalid.
When you use forms (and give them names), AngularJS creates a FormController that holds the current state of the form as well as some helper methods. You can access the FormController for a form using the form’s name, as we did in the preceding example using myForm. Things that are exposed as the state and kept up to date with data-binding
Now that you have understood basics of Angular JS, Check out the Angular JS internship by Surya Informatics Solutions, a trusted internship company with a network of more than 250,000 satisfied Angular JS Developers spread across the globe.
FOLLOW US ON: Surya Informatics Facebook Page, Surya Informatics Twitter Account, Surya Informatics Youtube
