AngularJS Events and Forms

AngularJS has directives for user events and built-in tools for checking form input.

Event Directives

Directive	Runs when
`ng-click`	The element is clicked
`ng-dblclick`	The element is double-clicked
`ng-change`	The value of an `ng-model` input changes
`ng-submit`	A form is submitted
`ng-keyup` / `ng-keydown`	A key is released or pressed
`ng-mouseenter` / `ng-mouseleave`	The mouse moves onto or off the element
`ng-focus` / `ng-blur`	An input gets or loses focus

ng-click

Example

html

<div ng-app="eventApp" ng-controller="EventController">
  <p>Cups of chai sold: {{ sold }}</p>
  <button ng-click="sell(1)">Sell 1</button>
  <button ng-click="sell(5)">Sell 5</button>
  <button ng-click="sold = 0">Reset</button>
</div>

<script>
angular.module("eventApp", []).controller("EventController", function ($scope) {
  $scope.sold = 0;
  $scope.sell = function (n) {
    $scope.sold += n;
  };
});
</script>

Output

(after Sell 1, then Sell 5)
Cups of chai sold: 6

The $event Object

Pass $event to get the browser's event object:

Example

html

<button ng-click="where($event)">Click me</button>

Example

$scope.where = function (event) {
  $scope.info = "Clicked at x=" + event.clientX + ", y=" + event.clientY;
};

ng-change

ng-change runs a function each time an input's value changes. It needs ng-model on the same element.

Example

html

<select ng-model="course" ng-change="updateFee()">
  <option value="web">Web Development</option>
  <option value="graphics">Graphic Designing</option>
</select>
<p>Monthly fee: Rs {{ fee }}</p>

Example

$scope.updateFee = function () {
  $scope.fee = $scope.course === "web" ? 5000 : 3500;
};

A Form with ng-submit

Give the form a name, and AngularJS creates a form object on the scope that tracks whether each field is valid.

Example

html

<div ng-app="formApp" ng-controller="FormController">
  <form name="admission" ng-submit="submit()" novalidate>
    <p>Name: <input name="fullName" ng-model="student.name" required ng-minlength="3"></p>
    <span ng-show="admission.fullName.$touched && admission.fullName.$invalid">
      Name is required (at least 3 letters).
    </span>

    <p>Email: <input type="email" name="email" ng-model="student.email" required></p>
    <span ng-show="admission.email.$touched && admission.email.$error.email">
      Please enter a valid email.
    </span>

    <p><button type="submit" ng-disabled="admission.$invalid">Apply</button></p>
  </form>
  <p>{{ message }}</p>
</div>

<script>
angular.module("formApp", []).controller("FormController", function ($scope) {
  $scope.student = {};
  $scope.submit = function () {
    $scope.message = "Thank you, " + $scope.student.name + ". We will email you soon.";
  };
});
</script>

Output

Thank you, Ayesha. We will email you soon.

novalidate turns off the browser's own pop-up messages so AngularJS can show its messages instead.

Form and Field States

Property	True when
`$pristine`	The user has not changed the field yet
`$dirty`	The user has changed the field
`$touched`	The user has left the field at least once
`$valid`	The value passes all rules
`$invalid`	The value breaks at least one rule
`$error.required`	A required field is empty

AngularJS also adds CSS classes such as ng-invalid, ng-valid and ng-touched to inputs, so you can style them:

Example

css

input.ng-invalid.ng-touched {
  border: 2px solid red;
}

Validation Directives

required makes a field compulsory
ng-minlength and ng-maxlength set text length limits
ng-pattern checks the value with a regular expression, for example a phone number
type="email", type="number" and type="url" check the format

Example

html

<input name="phone" ng-model="student.phone" ng-pattern="/^03[0-9]{9}$/">
<span ng-show="admission.phone.$error.pattern">Use the format 03001234567.</span>

Browser validation only helps the user. Always check data again on the server before saving it.

Exercise

Which property is true when a form field breaks at least one validation rule?

$pristine$touched$invalid$dirty