view code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<br /><br />
<div class="container">
<form class="form-horizontal" name="frmEmp" novalidate>
<div class="form-group" ng-class="{'has-error':frmEmp.txtId.$invalid}">
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" name="txtId" class="form-control" ng-model="EMP.EID" required/>
</div>
<span class="help-block has-error" ng-show="frmEmp.txtId.$invalid">
Eid should not be blank.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.txtName.$invalid}">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" name="txtName" class="form-control" ng-model="EMP.NAME" ng-pattern="/^[a-zA-Z\s]*$/" required />
</div>
<span class="help-block has-error" ng-show="frmEmp.txtName.$error.required">
Name should not be blank.
</span>
<span class="help-block has-error" ng-show="frmEmp.txtName.$error.pattern">
You can enter only alphabets.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.txtAddress.$invalid}">
<label class="control-label col-lg-4">ADDRESS</label>
<div class="col-lg-4">
<textarea name="txtAddress" class="form-control" ng-model="EMP.ADDRESS" required ></textarea>
</div>
<span class="help-block has-error" ng-show="frmEmp.txtAddress.$invalid">
Address should not be blank.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.txtPassword.$invalid}">
<label class="control-label col-lg-4">PASSWORD</label>
<div class="col-lg-4">
<input type="password" name="txtPassword" class="form-control" ng-model="EMP.PASSWORD" required ng-minlength="4" ng-maxlength="8" />
</div>
<span class="help-block has-error" ng-show="frmEmp.txtPassword.$error.required">
Password should not be blank.
</span>
<span class="help-block has-error" ng-show="frmEmp.txtPassword.$error.minlength">
Password min 4 chars.
</span>
<span class="help-block has-error" ng-show="frmEmp.txtPassword.$error.maxlength">
Password max 8 chars.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.cbMarried.$invalid}">
<label class="control-label col-lg-4">ARE YOU MARRIED ?</label>
<div class="col-lg-4">
<input type="checkbox" name="cbMarried" ng-model="EMP.ISMARRIED" required />
</div>
<span class="help-block has-error" ng-show="frmEmp.cbMarried.$invalid">
Please select your maritial status.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.rbGender.$invalid}">
<label class="control-label col-lg-4">GENDER</label>
<div class="col-lg-4">
<input type="radio" name="rbGender" value="Male" ng-model="EMP.GENDER" required />Male
<input type="radio" name="rbGender" value="Female" ng-model="EMP.GENDER" required />Female
</div>
<span class="help-block has-error" ng-show="frmEmp.rbGender.$invalid">
Please select a gender.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.txtSalary.$invalid}">
<label class="control-label col-lg-4">SALARY</label>
<div class="col-lg-4">
<input type="text" name="txtSalary" class="form-control" ng-model="EMP.SALARY" required ng-pattern="/^[0-9]{1,7}$/" />
</div>
<span class="help-block has-error" ng-show="frmEmp.txtSalary.$error.required">
Salary should not be blank.
</span>
<span class="help-block has-error" ng-show="frmEmp.txtSalary.$error.pattern">
You can enter only number.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.txtEmail.$invalid}">
<label class="control-label col-lg-4">EMAIL</label>
<div class="col-lg-4"><input type="email" name="txtEmail" class="form-control" ng-model="EMP.EMAIL" required ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" />
</div>
<span class="help-block has-error" ng-show="frmEmp.txtEmail.$error.required">
Email should not be blank.
</span>
<span class="help-block has-error" ng-show="frmEmp.txtEmail.$error.pattern">
Invalid Email.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.ddl.$invalid}">
<label class="control-label col-lg-4">COUNTRY</label>
<div class="col-lg-4">
<select required name="ddl" ng-model="EMP.CID">
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
</div>
<span class="help-block has-error" ng-show="frmEmp.ddl.$invalid">
Please select your country.
</span>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" value="Submit" class="btn btn-primary" style="width:80px" ng-click="save(frmEmp.$valid)" />
<input type="button" value="Update" class="btn btn-primary" style="width:80px" />
<input type="button" value="Reset" class="btn btn-primary" style="width:80px" />
</div>
</div>
<div class="row">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<thead class="bg-primary">
<tr>
<th>EID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list">
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td><a ng-click="edit(c.EID)">Edit</a>|<a ng-click="del(c.EID)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("app", [])
.controller("ctrl", function ($scope, $http) {
$scope.save = function (Isvalid)
{
alert(Isvalid);
}
});
</script>
No comments:
Post a Comment