AngularJS Forms

AngularJS forms provide data binding and validation for input controls.

Input controls

Input controls are HTML input elements:

• input element
• select element
• button element
• textarea element

data binding

Input controls are bound to the rest of the application using The directive defines the application controller. The directive provides data binding.

<input type="text" ng-model="firstname">

Now, the application has a named firstname .

The directive defines the application controller. The directive binds the input controller to the rest of the application.

property firstname, which can be referenced in the controller:

Example

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

It can also be referenced at other locations in the application:

Example

<form>
  Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>

</script>

Checkbox

The value of the checkbox is true or false. The value of The directive defines the application controller. The directive is applied to the checkbox and uses its value in your application.

Example

If the checkbox is checked, the title will be displayed:

<form>
  Check to display the title:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My title</h1>

</script>

Radio button

Using The directive defines the application controller. The directive binds the radio button to your application.

with the same The directive defines the application controller. The radio button can have different values, but only the selected value will be used.

Example

Display some text based on the value of the selected radio button:

<form>
  Pick a topic:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>

</script>

The value of myVar will be dogs、tuts or cars。

dropdown

Using The directive defines the application controller. The directive binds the dropdown to your application.

The directive defines the application controller. The property defined in the attribute will have the value of the selected option in the dropdown.

Example

Display some text based on the selected option value：

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

The value of myVar will be dogs、tuts or cars。

AngularJS Form Example

Application Code

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    Name：<br>
    <input type="text" ng-model="user.firstName"><br>
    Surname：<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>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
$scope.reset();
});

</script>

Try It Yourself novalidate

The attribute is a new attribute in HTML5. It disables any default browser validation.

Example Explained ng-app

The directive defines the AngularJS application. ng-controller

The directive defines the application controller. ng-model

The directive binds two input elements to the user object in the model. formCtrl master Controller as reset() Methods.

reset() The method sets the initial value of the object and defines user Object set to equal master Object.

ng-click The directive is only called when the button is clicked reset() Methods.

This application does not require the novalidate attribute, but it is usually used in AngularJS forms to override standard HTML5 validation.