Google News
logo
AngularJS Forms
AngularJS create a form with provides data-binding and validation of input controls. The Input controls are ways for a user to enter data. A form is a collection of controls for the purpose of grouping related controls together.

The AngularJS forms are used to following Input controls.

  • input elements
  • select elements
  • button elements
  • textarea elements
Data Binding
AngularJS Input control form are provides data-binding by using the ng-model directive.
<input type="text" ng-model="firstname">
The ng-model directive binds the input controller to the rest of your application.
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Data Binding Forms</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
<body>
 
<div ng-app="myApp" ng-controller="formCtrl">
  <form>
   <strong> First Name :</strong> <input type="text" ng-model="firstname">
  </form>
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "Ramana";
});
</script>
 
</body>
</html>
Output :
Example
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Data Binding Forms</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
<body>
 
<div ng-app="">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
  <h3>You entered : {{firstname}}</h3>
</div>
 
</body>
</html>
Output :
AngularJS Selectbox
The AngularJS ng-model directive is used to bind select boxes to your application.
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Data Binding Forms</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
<body>
 
<div ng-app="">
 
    <form>
      <b>Select one topic :</b>
      <select ng-model="myVar">
        <option value="">Select One</option>
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="Bootstrap">Bootstrap</option>
      </select>
    </form>
    
    <div ng-switch="myVar">
      <div ng-switch-when="HTML">
         <h2>HTML</h2>
         <p>Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".
He was a British Computer Scientist. The first web page was created at CERN by 
Tim Berners-Lee on August 6, 1991. </p>
      </div>
      <div ng-switch-when="CSS">
         <h2>CSS</h2>
         <p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides 
basic and advanced concepts of CSS technology. Our CSS tutorial is developed 
for beginners and professionals.</p>
      </div>
      <div ng-switch-when="Bootstrap">
         <h2>Bootstrap</h2>
         <p>Bootstrap is the most popular HTML, CSS and JavaScript framework 
for developing responsive, mobile-first web sites. Bootstrap is faster and 
easier web development.</p>
      </div>
    </div>
 
 
</div>
</body>
</html>
Output :
AngularJS Checkbox & Radio Buttons

The AngularJS checkbox has the value true or false. Apply the ng-model directive to a checkbox, and use its value in your application.

AngularJS ng-model directive is used to data bind radio buttons in your applications. In this example, we are also using ng-switch directive to hide and show HTML sections depending on the value of the radio buttons.

	
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Checkbox and Radiobuttons</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
<body>
 
<div ng-app="">
 
<h3>Checkbox Example :</h3>
  <form>
    <strong>Check Here :</strong>
    <input type="checkbox" ng-model="my_check">
  </form>
  <h2 ng-show="my_check"><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></h2>
  
  <hr />
  
<h3>Radiobuttons Example :</h3>
  <form>
  <strong>Pick a topic :</strong>
  <input type="radio" ng-model="my_radio" value="HTML">HTML
  <input type="radio" ng-model="my_radio" value="CSS">CSS
  <input type="radio" ng-model="my_radio" value="Bootstrap">Bootstrap
</form>
 
<div ng-switch="my_radio">
  <div ng-switch-when="HTML">
     <h2>HTML</h2>
     <p>Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".
He was a British Computer Scientist. The first web page was created at CERN 
by Tim Berners-Lee on August 6, 1991.</p>
  </div>
  <div ng-switch-when="CSS">
     <h2>CSS</h2>
     <p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic 
and advanced concepts of CSS technology. Our CSS tutorial is developed for 
beginners and professionals.</p>
  </div>
  <div ng-switch-when="Bootstrap">
     <h2>Bootstrap</h2>
     <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
developing responsive, mobile-first web sites. Bootstrap is faster and easier 
web development.</p>
  </div>
</div>
  
</div>
 
</body>
</html>
 
Output :