I'm unable to get through a piece of code using angular js.
Actually I'm trying to fill in a form and pass data using AngularJS. I'm able to fetch all data except the date input textfield, which is populated on the click of a button and displayed on textfield.
Here's my code:
<div ng-controller="EmployeeController">
<form name="frmEmp" novalidate>
Employee Name:
<input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" required />
Salary:
<input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" required />
Date of Birth:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-sm calendar-icon" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
</span>
<input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
</div>
<input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
<input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save(emp)" />
</form>
</div>
And my controller looks like below:
myApp.controller('EmployeeController', ['$scope',function ($scope) {
$scope.Save = function (emp) {
alert("In employee\'s Save function\n" + emp);
$scope.emp = {
EName: emp.EName,
Salary: emp.Salary,
Dob: emp.Dob
};
alert("Ename: " + $scope.emp.EName);
console.log("Ename: " + $scope.emp.EName);
alert("Salary: " + $scope.emp.Salary);
console.log("Salary: " + $scope.emp.Salary);
alert("Dob: " + $scope.emp.Dob);
console.log("Dob: " + $scope.emp.Dob);
};
}
My concern is that I'm able to fetch Ename and Salary. But Dob returns 'undefined'.
For the datepicker i'm using the following script.
<script type="text/javascript">
datepickr('.calendar-icon', { altInput: document.getElementById('calendar-input'), dateFormat: 'd-m-Y' });
</script>
One more fact. I'm familiar with JQuery and trying to make my application purely on AngularJS.
Any help in this regard would be greatly appreciated.
Sorry for my poor English.:-)
Here's the plunk code:
PlunKr
Here is a working plnkr of your example.
The solution is to use bootstrap-tpls for angular integration, then you have access to datepicker directive.
Instead of your input, I just added:
I also made a few improvements in your controller (Save function param removed, emp object initialization on controller creation) and on save button (form validation, usage of ng-form directive). so final solution looks like this:
Html:
<head>
<meta charset="utf-8" />
<title>AngularJS demo</title>
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"> </script>
<script src="angular-ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="EmployeeController">
<div ng-form="frmEmp">
Employee Name:
<input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" ng-required="true" /> Salary:
<input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" ng-required="true" /> Date of Birth:
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="emp.Dob" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="opened = true"> <i class="glyphicon glyphicon-calendar"></i></button>
</span>
<input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save()" ng-disabled="frmEmp.$invalid" />
</div>
</body>
Controller:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('EmployeeController', ['$scope', function($scope) {
$scope.emp = {};
$scope.Save = function() {
//alert("In employee\'s Save function\n" + $scope.emp);
alert("Ename: " + $scope.emp.EName);
console.log("Ename: " + $scope.emp.EName);
alert("Salary: " + $scope.emp.Salary);
console.log("Salary: " + $scope.emp.Salary);
alert("Dob: " + $scope.emp.Dob);
console.log("Dob: " + $scope.emp.Dob);
};
}])
And please make sure to have the css included.
Related
I am developing an app using angularjs. I need to add date time picker to my form. but not sure how to add it.
you can use this
angularjs-datetime-picker
:)
var app = angular.module('myApp', ['angularjs-datetime-picker']);
app.run(function($rootScope) {
$rootScope.gmtDate = new Date('2015-01-01 00:00:00 -00:00');
});
app.controller("ctrl", function($scope) {
$scope.model = "1/1/1991";
$scope.rows = ['Paul', 'John', 'Lucie'];
$scope.temp = false;
$scope.addRow = function() {
$scope.temp = false;
$scope.addName = "";
};
$scope.deleteRow = function(row) {
$scope.rows.splice($scope.rows.indexOf(row), 1);
};
$scope.plural = function(tab) {
return tab.length > 1 ? 's' : '';
};
$scope.addTemp = function() {
if ($scope.temp) $scope.rows.pop();
else if ($scope.addName) $scope.temp = true;
if ($scope.addName) $scope.rows.push($scope.addName);
else $scope.temp = false;
};
$scope.isTemp = function(i) {
return i == $scope.rows.length - 1 && $scope.temp;
};
});
body {
padding: 20px;
}
.search {
margin-left: 10px;
}
<!DOCTYPE html>
<html ng-app="myApp" ng-init="
date1='01-01-2015 00:00:00';
date2='Thu Jan 01 2015 00:00:00 GMT-0500 (EST)';
date3='2015-01-01T00:00:00-0400';
date4='2015-01-01';">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angularjs-datetime-picker-v2#0.2.2/angularjs-datetime-picker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angularjs-datetime-picker-v2#0.2.2/angularjs-datetime-picker.css">
<!-- -->
<!-- <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
<meta charset=utf-8 />
<title>Angular JS Demo</title>
</head>
<body ng-controller="ctrl">
<input ng-model="date4" datetime-picker date-only /> <br>
<input ng-model="date1" datetime-picker="" date-only="" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" date-only /> <br>
<input ng-model="date2" datetime-picker="" date-format="yyyy-MM-dd" size="30" date-only="" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <br> <input ng-model="date3" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" close-on-select="false"
/> <br>
<input ng-model="date3" datetime-picker="" date-format="yyyy-MM-dd HH:mm:ss" close-on-select="false" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <input ng-model="date4" datetime-picker hour="23" minute='59'/><br>
<input ng-model="date4" datetime-picker="" hour="23" minute="59" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> gmtDate : "2020-01-01T11:58:00.000Z"<br> <input type="date" ng-model="gmtDate" size="30" /><br>
<input datetime-picker ng-model="addName" />
<h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span></h2>
<form class="form-horizontal">
<span ng-class="{'input-append':addName}">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
<input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
</span>
<span class="search input-prepend" ng-class="{'input-append':search}">
<span class="add-on"><i class="icon-search"></i></span>
<input type="text" class="span2" placeholder="Search" ng-model="search">
<button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add"><i class="icon-remove icon-white"></i></button>
</span>
</form>
<table class="table table-striped">
<tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}">
<td>{{$index+1}}</td>
<td>{{row}}</td>
<td>
<button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
</table>
</body>
</html>
I am new to AngularJS. I am creating single page application in which a form consists of multiple steps. I have used buttons and input fields. Form is getting submitted. I want to fetch the form fields values but i don't know the ways to do it. I have added my code. I want to see what user is filling so i can store the values in database. How do i get my values in console log.? Please someone guide me how to do it.
// Code goes here
var app = angular.module("MyApp", ["ngAnimate"]);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
console.log(myform);
}
};
$scope.sliderValue = null;
$scope.name = '';
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
});
.circle
{
width:125px;
height:125px;
border:2px solid #FFF;
border-radius:62.5px;
font-size:18px;
color:#fff;
line-height:125px;
text-align:center;
background:#67508F
}
<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body ng-controller="MyCtrl">
<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">
<div ng-show="step==1">
<h3>Which step</h3>
<div ng-form='step1form'>
<button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 4">Go to step 4</button>
<button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 2">Go to step 2</button>
</div>
</div>
<div ng-show="step==2">
<h3 class="zoomIn">which step</h3>
<div ng-form='step2form'>
<div class="circle zoomIn" ng-disabled="!step2form.$valid" ng-click="step = 4"><span>Go to step 3</span></div>
</div>
</div>
<div ng-show="step==4">
<h3 class="zoomIn">Personal Details</h3>
<div ng-form='step14form'>
<input ng-model="FirstName" name="FirstName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="First Name" required>
<p class="ErrorMessage" ng-show="step4form.FirstName.$error.pattern">Please enter a valid First name.</p>
<input ng-model="LastName" name="LastName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="Last Name" required>
<p class="ErrorMessage" ng-show="step4form.LastName.$error.pattern">Please enter a valid Last name.</p>
<input ng-model="Phone" name="Phone" type="text" ng-pattern ="/^[789]\d{9}$/" class="zoomIn" placeholder="Phone" required>
<p class="ErrorMessage" ng-show="step4form.Phone.$error.pattern">Please enter a valid phone number.</p>
<input ng-model="Email" name="Email" type="text" ng-pattern ="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" class="zoomIn" placeholder="Email" required>
<p class="ErrorMessage" ng-show="step4form.Email.$error.pattern">Please enter a valid email address.</p>
</div>
<button type="submit" id="submit" class="Submit" ng-disabled="!myform.$valid" ng-click="submit()">Submit</button>
</div>
</form>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script src="script.js"></script>
</body>
</html>
My suggestion is to use data object for all of your ng-model inputs.
this is my JSFiddle example: JSFiddle
HTML:
<div ng-app>
<form ng-controller="FormController" name="myForm">
<div class="header padding-b--10">Form Area</div>
<div class="padding-b--10">
<input name="empId" placeholder="Employee ID" ng-model="data.empId"
style="padding:5px" required/>
<span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
</div>
<div class="padding-b--10">
<input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
style="padding:5px" required/>
<span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
</div>
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
<pre>{{data}}</pre>
<pre>myForm.empId.$valid = {{myForm.empId.$valid}}</pre>
<pre>myForm.empEmail.$valid = {{myForm.empEmail.$valid}}</pre>
</form>
</div>
JS:
function FormController($scope){
$scope.invalid = "Invalid";
$scope.submit = function(){
console.log($scope.data);
}
};
I want to click the image icon to open the calender pop for html5. I am using angularjs. Its version issue for ui-bootstrap-tpls. Some one please help me as soon as possible.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
console.log($scope.dt);
};
});
</script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Date output: <em>{{dt}}</em></pre>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" ng-model="dt" ng-required="true" />
<input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
I´ll recommend you to try something like this.
<span class="input-group-addon" id="ID">text</span>
<input type="text" data-ng-model="MODEL"
class="form-control" data-uib-datepicker-popup
data-is-open="popup.opened" data-min-date="minDate"
data-max-date="maxDate" data-datepicker-options="dateOptions"
data-date-disabled="disabled(date, mode)" data-ng-required="true"
data-close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
data-ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Let me know if it works.
What versions of angular Js, Datepicker and angular ui-bootstrap-tpls are you using?
Here it might be helpful to your situation.
Working fiddle :
fiddle link
All,
I need to implement the validation on Angular js Bootstrap DatePicker. It works for following scenarios
While page is loading no validation
onChange of date text box it checks for Empty and invalid date format
After selecting the valid date from date picker calender it removes the error messsages mentioned in above scenario no: 2.
while entering the invalid date in text box it throws "Invalid date format ".
But for the following scenarios it doesn't work.
when enter the valid date it is still displaying the error message "Invalid date Format"
Here is my code snippet
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Date output: <em>{{dt}}</em></pre>
<form id="main-form" name="peopleForm" novalidate>
<div class="row">
<div class="col-md-6">
<p class="form-group">
<div ng-class="{ 'has-error': peopleForm.txtGroupExpirationDate.$invalid && peopleForm.txtGroupExpirationDate.$dirty }" class="text-right">
<input id="txtGroupExpirationDate" name="txtGroupExpirationDate"
type="date"
class="form-control"
ng-model="dt"
datepicker-popup="MM-dd-yyyy"
is-open="false"
ng-required="true" />
<input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$error.required && peopleForm.txtGroupExpirationDate.$dirty">
Expiration Date can not be empty
</span>
<span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$invalid && peopleForm.txtGroupExpirationDate.$dirty ">
Invalid date format
</span>
</div>
</p>
</div>
</div>
</form>
</div>
</body>
</html>
here is the Example.js
angular.module('ui.bootstrap.demo',['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl',function ($scope) {
$scope.dt = null;
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
$scope.groupExpirationDate = null;
console.log($scope.dt);
};
});
So the question is how to enable the Fifth scenario?
I have a form using ng-messages for form validation error messages. Im also using the new ng-model-options with $rollbackViewValue to rollback all changes to the form. Problem is ng-mesages will not work if I use the rollbackViewValue on the form.
I really like this new function in angular1.3 using ng-model-options to reset a form as I have not found anything that works as well as $rollbackViewValue()
Heres is the code and plunker
<!DOCTYPE html>
<html data-ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form"
data-ng-submit="vm.submit()"
data-ng-model-options="{updateOn: 'submit'}" >
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="form.$rollbackViewValue()">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
<script src="scripts.js"></script>
</body>
</html>
controller
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl',function ($scope, $rootScope) {
var vm = this;
vm.names = {
fname: "Albert",
lname: "Capone"
}
});
You would need to make the form pristine and revert back the touched state as well. You can do so by calling the special functions, $setPristine() and $setUntouched() , on the formController. But it appears rollBackViewValue works with ngSubmit, but it is only to revertback during some action, (like esc key, another button). But if the form field has contraint errors it appears it updated viewvalue to nullify the entered value. You could try this way by resetting to default field values.
In your view:-
<button type="button" class="btn btn-default"
data-ng-click="vm.reset(form)">reset</button>
In your controller:-
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue();
form.$setPristine(); //Set pristine state
form.$setUntouched(); //Set state from touched to untouched
vm.names = angular.copy(defModel); //reset model
}
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl', function($scope, $rootScope) {
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue(); //Probably can be removed
form.$setPristine();
form.$setUntouched();
vm.names = angular.copy(defModel);
}
});
<div data-ng-app="App">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form" data-ng-submit="vm.submit(form)" data-ng-model-options="{updateOn: 'submit'}">
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="vm.reset(form)">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
</div>