Angular Js form contains data-binding and validations for input controls.

 

1. What is check box?

The checkbox has the value true or false.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<form>
Check box:<input type="checkbox" ng-model="checkbox">
</form>
<h1 ng-show = "checkbox">Welcome !</h1>
</div>
</body>
</html>

 

2. What is radio button?

The radio button is used to select only one when it has the same ng-model with different values.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
<form>
Radio Button:
<input type="radio" ng-model="myradio" value="cars">Cars
<input type="radio" ng-model="myradio" value="bikes">Bikes
<input type="radio" ng-model="myradio" value="autos">Autos
</form>
<div ng-switch="myradio">
<div ng-switch-when="cars">
<h1>Cars</h1>
</div>
<div ng-switch-when="bikes">
<h1>Bikes</h1>
</div>
<div ng-switch-when="autos">
<h1>Autos</h1>
</div>
</div>
<p>Click on radio button to show the header.</p>
</body>
</html>

 

3. What is the select box?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
<form>
Select a vehicle:
<select ng-model = "mySelectbox">
<option value="">--select--
<option value="cars">Cars
<option value="bikes">Bikes
<option value="autos">Autos
</select>
</form>
<div ng-switch=" mySelectbox ">
<div ng-switch-when="cars">
<h1>Cars</h1>
</div>
<div ng-switch-when="bikes">
<h1>Bikes</h1>
</div>
<div ng-switch-when="autos">
<h1>Autos</h1>
</div>
</div>
<p>Click on radio button to show the header.</p>
</body>
</html>

 

4. An example of angular Js Form?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myController">
<form>
First Name: <input type="text" ng-model="user.fName"><br>
Last Name: <input type="text" ng-model="user.lName"><br>
<br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var myFirstApp = angular.module('myFirstApp',[ ]);
myFirstApp.controller('myController',function($scope){
$scope. master = {fName:"Ebc",lName:"Learn"};
$scope.reset = function(){
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
</body>
</html>