AngularJS Forms « »

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">
    
    <div>
        <input type="text" ng-model="user.name" required />
    </div>

    <div>
        <input type="text" ng-model="user.city" required/>
    </div>

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

</form>

Directives

• ng-submit
• ng-model

ng-submit

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

The Controller

app.controller('AddUserCtrl',['$scope','$location',function($scope,$location){
    $scope.sumbit = function(){
        $location.path('/addedUser/' + $scope.name + '/' + $scope.city);
    };
}]);

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>
</form>

$watch

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

watchFn

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

watchAction

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

deepWatch

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