WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Forms


AngularJS forms are a collection of input controls.


HTML control

The following HTML input elements are called HTML controls:

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


Data-Binding

The Input control uses the ng-model directive to implement data binding.

<input type="text" ng-model="firstname">
The above code application has a property named firstname.

It is bound to your application via the ng-model directive.

firstname attribute can be used in controller:

Example

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

Can also be used elsewhere in the app:

Example

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

<h1>You entered: {{firstname}}</h1>
Try it Yourself »

Checkbox

The value of checkbox is true or false, which can be bound using the ng-model directive. Its value can be used in applications:

Example

Display the contents of h1 label when the check box is selected:

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

<h1 ng-show="myVar">My Header</h1>
Try it Yourself »

Radio buttons

We can use ng-model to bind radio buttons to your application.

Radio boxes use the same ng-model and can have different values, but only the value of the selected radio button will be used.

Example

Display information based on 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>
Try it Yourself »

The value of myVar can be dogs, tuts, or cars.


Selectbox

Bind select boxes to your application with the ng-model directive.

The property characterized in the ng-model trait will have the estimation of the chose alternative in the selectbox.

 Example

Display some content, in view of the estimation of the chose 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>
Try it Yourself »

The estimation of myVar will be either dogs, tuts, or cars.


An AngularJS Form Example

First Name:

Last Name:


form = {{user}}

master = {{master}}


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

Example Explained

ng-app directive defines an AngularJS application.

ng-controller directive defines an application controller.

ng-model directive binds two input elements to the model's user object.

formCtrl function is set The initial value of master object and defines reset () method.

reset () method sets user The object is equal to master object.

ng-click instruction called reset () Method and called when the button is clicked.

The novalidate attribute is not required in your application, but you need to use it in AngularJS forms to override standard HTML5 validation.



Welookups is optimized for learning. © 2018 -
All Right Reserved and you agree to have read
and accepted our term and condition.
welookups.com