Working With AngularJS Form

As a web developer creating a form is a very common task for us. AngularJS enhances the user experience and validation. AngularJS makes two-way binding easy, in other words bind data from a model object ($scope) to form an input control and vice-versa.

In the following example we have created a simple form with one field and bound it with User.firstName.

<body ng-app="myapp">

<div ng-controller="MyFromController" >

<form>

<table border="1px solid">

<tr>

<td>First name :</td>

<td>

<input type="text" name="firstName" ng-model="User.firstName">

</td>

</tr>

</table>

</form>

<div>

Hello {{User.firstName}} !!!

</div>

</div>

<script>

angular.module("myapp", [])

.controller("MyFromController", function ($scope)

{

$scope.User = {};

$scope.User.firstName = "Ratnesh";

});

</script>

</body>

Now we will add some more fields of various types to our form to enter employee details. Here we have added a radio for gender as:

<input type="radio" ng-model="User.Gender" value="Male">Male

<input type="radio" ng-model="User.Gender" value="Female">Female

One select box for “position” as:

<select ng-model="User.Position" ng-options="obj.id as obj.name for obj in Positions">

<option value="">--Select--</option>

</select>

One Multi select box for Languages as:

<select multiple="true" ng-model="User.Languages" ng-options="obj.id as obj.name for obj in Languages"></select>

We have also added some input fields for Age, email and so on. We will use them to understand the validation later in this article. So our form looks such as:

Validation

AngularJS comes with a set of validation directives. It validates the form's control value before assigning to the $scope properties. If any control's value is invalid, it is not assigned into the $scope and the corresponding $scope property is cleared.

Some of the validation directives that we will use in our employee details page are as follows.

ng-minlength to validate the length of the data entered

ng-maxlength to validate the length of the data entered

ng-pattern to validate the value of an input field against a regular expression

ng-required to make a field requuired

We have set our validation rule for each control. So our HTML file would look as:

<select ng-model="User.Position" ng-options="obj.id as obj.name for obj in Positions">

<option value="">--Select--</option>

</select>

</td>

<td></td>

</tr>

<tr>

<td>Languages :</td>

<td>

<select multiple="true" ng-model="User.Languages" ng-options="obj.id as obj.name for obj in Languages"></select>

</td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td>

<input type="submit" ng-click="update(User)" value="Save" />

</td>

</tr>

</table>

</form>

</div>

<script>

angular.module("myapp", [])

.controller("MyFromController", function ($scope) {

$scope.User = {};

$scope.Positions = [

{ id: "1", name: "Developer" }

, { id: "2", name: "Team Lead" }

, { id: "3", name: "Project Manager" }

];

$scope.Languages = [

{ id: "1", name: "C#" }

, { id: "2", name: "Vb.Net" }

, { id: "3", name: "Java" }

];

$scope.update = function (user) {

alert(JSON.stringify(user));

};

});

</script>

</body>

</html>

If we submit our form with all valid values then we would get an alert that shows all the values in a JSON string as:

Now change the values for some field as invalid and submit as in the following:

We can see that all the invalid values and properties have been removed from the user object by Angular. Until now we have not shown any message to our form user about validation. For this we need to use form and control state. If we had added a name attribute to our form then it would be added to $scope as a property. In our case we would add “EmpForm” as name. Now we access the model property with the form name. For example we can access the firstName as:

$scope.EmpForm.firstName

We have changed the form tag as:

<form name="EmpForm" ng-submit="submit()" novalidate>

And defined a submit as:

$scope.submit = function() { $scope.submitted = true; };

We have written some code to show a custom message for first name as follows: