AngularJS Forms

May 14, 2015

The Form

Two or more controllers can be applied to the same element, and we can use controller as to identify each controller.

<form ng-submit="user.submit()" ng-controller="AddUserCtrl as user">
        <input type="text" ng-model="" required />

        <input type="text" ng-model="" required/>

        <button type="submit">Add Customer</button>



  • ng-submit
  • ng-model


Automatically prevents the brower from doing its defualt METHOD action when it tries to submit the form.

The Controller

    $scope.sumbit = function(){
        $location.path('/addedUser/' + $ + '/' + $;

Validate a form

Disable a button because the form is not valid

<form name="addUserForm" ng-controller="myController">
<button ng-click="addUser()" ng-disabled="!addUserForm.$valid">Submit</button>


When not only the users update a particular input we might need to keep track of it.

You can call $watch() with an expression to observe and a callback that gets invoked whenever the expression changes.

$scope.$watch('myObject.myValue', myCallback);

//$watch(watchFn, watchAction, deepWatch)
  • watchFn
  • watchAction
  • deepWatch


This parameter is a string with an Angular expression or a function that returns the current value of the model you want to watch.


This is the function or expression to be called when the watchFn changes.


It tells Angular to examine each property within the watched object for changes.