X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

AngularJS Forms


An AngularJS form is a collection of input controls.


HTML Controls

HTML input elements are called HTML controls:

  • input elements
  • select elements
  • button elements
  • textarea elements

HTML Forms

HTML forms group HTML controls together.


An AngularJS Form Example

First Name:

Last Name:


form = {{user}}

master = {{master}}


Application Code

<div ng-app="" ng-controller="formController">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{{user}}</p>
  <p>master = {{{master}}</p>
</div>

<script>
function formController ($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
};
</script>

Try it Yourself »

Note The HTML attribute novalidate is used to disable default browser validation.


Example Explained

The AngularJS directive ng-model binds the input elements to the model.

The model object master has the value {"firstName" : "John", "lastName" : "Doe"}.

The model function reset sets the model object user equal to master.




Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook