Wednesday, 23 November 2016

Validation in Angularjs


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>

Posted by at No comments:

Monday, 14 November 2016

CURD operation in angularjs using list of checkboxes

I have 3 models those are
API  Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MvcApplication6.Models;
using System.Data.Entity;

namespace MvcApplication6.Controllers
{
    public class ValuesController : ApiController
    {
        [HttpGet]
        public List<EMP> Gets(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {

                return obj.EMPs.ToList();

            }
        }
        [HttpGet]
        public List<DEPT> Getd()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.DEPTs.ToList();
            }
        }
        [HttpGet]
        public EMPMAPING Get(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMPMAPING emp = new EMPMAPING();
                var mp = obj.EMPs.SingleOrDefault(m => m.EID == EID);
                emp.EID = mp.EID;
                emp.NAME = mp.NAME;
                emp.IDS = obj.MAPPINGs.Where(m => m.EID == EID).Select(n => n.DID.Value).ToList();
                return emp;
            }
        }
        [HttpPost]
        public string Post(EMPMAPING eMPMAPING)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp = new EMP();
                emp.EID = eMPMAPING.EID;
                emp.NAME = eMPMAPING.NAME;
                obj.EMPs.Add(emp);
                obj.SaveChanges();
                for (int i = 0; i < eMPMAPING.IDS.Count(); i++)
                {
                    MAPPING mp = new MAPPING();
                    mp.EID = eMPMAPING.EID;
                    mp.DID = Convert.ToInt32(eMPMAPING.IDS[i]);
                    obj.MAPPINGs.Add(mp);
                    obj.SaveChanges();

                }
                return "Data Saved.";
            }
        }
        [HttpPut]
        public string Put(EMPMAPING eMPMAPING)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp = obj.EMPs.SingleOrDefault(m => m.EID == eMPMAPING.EID);
                emp.NAME = eMPMAPING.NAME;
                obj.SaveChanges();
                for (int i = 0; i < eMPMAPING.IDS.Count; i++)
                {
                    int? j = Convert.ToInt32(eMPMAPING.IDS[i]);
                    var n = obj.MAPPINGs.FirstOrDefault(m => m.DID == j && m.EID == eMPMAPING.EID);
                    if(n!=null)
                    obj.MAPPINGs.Remove(n);
                    obj.SaveChanges();
                }
                for (int i = 0; i < eMPMAPING.IDS.Count(); i++)
                {
                    MAPPING mp = new MAPPING();
                    mp.EID = eMPMAPING.EID;
                    mp.DID = Convert.ToInt32(eMPMAPING.IDS[i]);
                    obj.MAPPINGs.Add(mp);
                    obj.SaveChanges();

                }
                return "Data Updated";
            }
        }
        [HttpDelete]
        public string Delete(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp = obj.EMPs.SingleOrDefault(m => m.EID == EID);
                obj.EMPs.Remove(emp);
                obj.SaveChanges();
                var x=obj.MAPPINGs.Where(m => m.EID == EID).ToList();
                for (int i = 0; i <x.Count; i++)
                {
                    int k=x[i].ID;
                    obj.MAPPINGs.Remove(obj.MAPPINGs.SingleOrDefault(n => n.ID ==k ));
                    obj.SaveChanges();
                }
               
                return "Data Deleted";
            }
        }
    }

    public class EMPMAPING
    {
        public int EID { get; set; }
        public string NAME { get; set; }
        public List<int> IDS { get; set; }
    }
}

View Code :



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title></title>
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/checklist-model.js"></script>
</head>
<body ng-controller="ctr">
    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-lg-4 control-label">EID</label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" ng-model="EMPMAPING.EID" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">NAME</label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" ng-model="EMPMAPING.NAME" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">DEPARTMENT NAME</label>
                <div class="col-lg-4">
                    <label ng-repeat="c in list">
                        <input type="checkbox" checklist-model="EMPMAPING.IDS" checklist-value="c.DID" /> {{c.DNAME}}<br />
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label"></label>
                <div class="col-lg-4">
                    <input type="button" value="Save" style="width:80px" class="btn btn-primary" ng-click="save()"/>
                    <input type="button" value="Update" style="width:80px" class="btn btn-primary" ng-click="update()" />
                    <input type="button" value="Reset" style="width:80px" class="btn btn-primary" ng-click="reset()" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label"></label>
                <div class="col-lg-4">
                    <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 liste">
                                <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>
            </div>
        </form>
    </div>
</body>
</html>
<script type="text/javascript">
    angular.module("app", ['checklist-model'])
    .controller("ctr", function ($scope, $http) {
        function CLR()
        {
            $scope.EMPMAPING = new emp();
        } CLR();
     
        function fill()
        {
            $http.get("http://localhost:56131/api/Values/Gets?i="+1).then(function (d) {
                $scope.liste = d.data;
            });
        } fill();
        $http.get("http://localhost:56131/api/Values/Getd").then(function (d) {
            $scope.list = d.data;
        });
        $scope.reset = function ()
        {
            CLR();
        }
        $scope.save = function ()
        {
            $http.post("http://localhost:56131/api/Values/Post",$scope.EMPMAPING).then(function (d) {
                alert(d.data);
                fill();
                CLR();
            });
        }
        $scope.update = function () {
            $http.put("http://localhost:56131/api/Values/Put", $scope.EMPMAPING).then(function (d) {
                alert(d.data);
                fill();
                CLR();
            });
        }
        $scope.edit = function (s)
        {
            $http.get("http://localhost:56131/api/Values/Get?EID="+s).then(function (d) {
                $scope.EMPMAPING = d.data;
            });
        }
        $scope.del = function (s)
        {
            if(confirm('Do you want to delete it?'))
            $http.delete("http://localhost:56131/api/Values/Delete?EID=" + s).then(function (d) {
                alert(d.data);
                fill();
            });
        }
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            IDS:[]
        }
    }
</script>

Posted by at No comments:
Subscribe to: Posts (Atom)