Angular Forms

AngularJS Forms

---

Forms inward AngularJS provides data-binding together with validation of input controls.

---

Input Controls

Input controls are the HTML input elements:

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

---

Data-Binding

Input controls provides data-binding yesteryear using the ng-model directive.

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

The application does instantly accept a belongings named firstname.
The ng-model directive binds the input controller to the residuum of your application.
The belongings firstname, tin live referred to inward a controller:

Example

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

It tin besides live referred to elsewhere inward the application:

Example

<form>
First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>

---

Checkbox

Influenza A virus subtype H5N1 checkbox has the value true or false. Apply the ng-model directive to a checkbox, together with utilisation its value inward your application.

Example

Show the header if the checkbox is checked:

 <form>
    Check to demo a header:
    <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>

---

Radiobuttons

Bind radio buttons to your application alongside the ng-model directive.
Radio buttons alongside the same ng-model tin accept dissimilar values, but solely the selected i volition live used.

Example

Display simply about 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>

The value of myVar volition live either dogs, tuts, or cars.

---

Selectbox

Bind choose boxes to your application alongside the ng-model directive.
The belongings defined inward the ng-model attribute volition accept the value of the selected pick inward the selectbox.

 Example

Display simply about text, based on the value of the selected option:

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

The value of myVar volition live either dogs, tuts, or cars.

---

An AngularJS Form Example

First Name:

Last Name:

shape = {"firstName":"John","lastName":"Doe"}

primary = {"firstName":"John","lastName":"Doe"}

---

Application Code

<div ng-app="myApp" ng-controller="formCtrl">
  <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>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

The novalidate attribute is novel inward HTML5. It disables whatever default browser validation.

---

Example Explained

The ng-app directive defines the AngularJS application.
The ng-controller directive defines the application controller.
The ng-model directive binds ii input elements to the user object inward the model.
The formCtrl controller sets initial values to the master object, together with defines the reset() method.
The reset() method sets the user object equal to the master object.
The ng-click directive invokes the reset() method, solely if the push is clicked.
The novalidate attribute is non needed for this application, but usually yous volition utilisation it inward AngularJS forms, to override criterion HTML5 validation.

---