For Example Code:
File name : index.html
<!doctype html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="app.js"></script>
<script src="field.js"></script>
<script src="submitvalid.js"></script>
</head>
<body ng-controller="mainController">
<form submit-valid="submitForm()" name='customer-form' novalidate>
<field ng-model='student.phone' type='text' label='Phone:' data-required ng-pattern="/^[0-9]+$/">
<validator key='required'>Phone is required</validator>
<validator key='pattern'>Phone is invalid</validator>
</field>
<field ng-model='student.name' type='text' label='First Name:' data-required >
<validator key='required'>Firstname is required</validator>
</field>
<field ng-model='student.gender' template='select' type='text' label='Gender:' data-required ng-options="item for item in Gender">
<validator key='required'>Gender is required</validator>
</field>
<field ng-model='student.address' type='text' template='textarea' label='Address:' data-required >
<validator key='required'>Address is required</validator>
</field>
<input type="submit" value="submit" id="submit" name="submit"/>
</form>
<pre>{{ student | json }}</pre>
</body>
</html>
File name : style.css
.pristine.true, .dirty.true, .invalid.true {
background: gray;
}
.valid.false {
background: red;
}
.valid.true {
background: green;
}
.error {
color: red;
}
File name : app.js
var app = angular.module('MyApp', []);
app.controller('mainController', function($scope) {
$scope.student = {};
$scope.student.phone = "7778899845";
$scope.Gender = ["Male", "Female"];
$scope.submitForm = function() {
alert('Data Submitted');
};
});
File name : field.js
var app = angular.module('MyApp');
app.directive('field', function($compile, $http, $templateCache, $interpolate) {
var templatePath = '';
var findInputElement = function(element) {
return angular.element(element.find('input')[0] || element.find('textarea')[0] || element.find('select')[0]);
};
return {
restrict:'E',
terminal: true,
require: '?^form',
compile:function compile(element, attrs) {
var validationMessages = [];
angular.forEach(element.find('validator'), function(validatorElement) {
validatorElement = angular.element(validatorElement);
validationMessages.push({
key: validatorElement.attr('key'),
getMessage: $interpolate(validatorElement.text())
});
});
var labelContent = '';
if ( element.attr('label') ) {
labelContent = element.attr('label');
element[0].removeAttribute('label');
}
if ( element.find('label')[0] ) {
labelContent = element.find('label').html();
}
if ( !labelContent ) {
throw new Error('No label provided');
}
var template = attrs.template || 'input';
var getFieldElement = $http.get(templatePath + template + '.html', {cache:$templateCache}).then(function(response) {
var newElement = angular.element(response.data);
//console.log(response.data);
var inputElement = findInputElement(newElement);
angular.forEach(element[0].attributes, function (attribute) {
var value = attribute.value;
var key = attribute.name;
inputElement.attr(key, value);
});
var labelElement = newElement.find('label');
labelElement.html(labelContent);
return newElement;
});
return function (scope, element, attrs, formController) {
getFieldElement.then(function(newElement) {
var childScope = scope.$new();
childScope.$modelId = attrs.ngModel.replace('.', '_').toLowerCase() + '_' + childScope.$id;
var inputElement = findInputElement(newElement);
inputElement.attr('name', childScope.$modelId);
inputElement.attr('id', childScope.$modelId);
newElement.find('label').attr('for', childScope.$modelId);
childScope.$validationMessages = {};
angular.forEach(validationMessages, function(validationMessage) {
scope.$watch(validationMessage.getMessage, function (message) {
childScope.$validationMessages[validationMessage.key] = message;
});
});
$compile(newElement)(childScope, function(clone) {
element.after(clone);
element.remove();
});
if ( formController ) {
childScope.$form = formController;
childScope.$field = formController[childScope.$modelId];
}
});
};
}
};
});
File name : submitvalid.js
var app = angular.module('MyApp');
app.directive('submitValid', function($parse) {
return {
require: 'form',
link: function(scope, formElement, attributes, form) {
form.attempt = false;
formElement.bind('submit', function (event) {
form.attempt = true;
if (!scope.$$phase) scope.$apply();
var fn = $parse(attributes.submitValid);
if (form.$valid) {
console.log(scope);
scope.$apply(function() {
fn(scope, {$event:event});
});
}
});
}
};
});
File name : input.html
<div class="control-group" ng-class="{'error' : $field.$invalid && ( $field.$dirty || $form.attempt )}"> <label class="control-label" >{{label}}</label> <div class="controls"> <input> <div ng-repeat="(key, error) in $field.$error" ng-show="error && ( $field.$dirty || $form.attempt )" class="validation-label">{{$validationMessages[key]}}</div> </div> </div>
File name : select.html
<div class="control-group" ng-class="{'error' : $field.$invalid && $field.$dirty}"> <label class="control-label">{{label}}</label> <div class="controls"> <select></select> <div ng-repeat="(key, error) in $field.$error" ng-show="error && $field.$dirty" class="validation-label">{{$validationMessages[key]}}</div> </div> </div>
File name : textarea.html
<div class="control-group" ng-class="{'error' : $field.$invalid && $field.$dirty}"> <label class="control-label">{{label}}</label> <div class="controls"> <textarea></textarea> <div ng-repeat="(key, error) in $field.$error" ng-show="error && $field.$dirty" class="validation-label">{{$validationMessages[key]}}</div> </div> </div>
No comments:
Post a Comment
Thanks to comment our blog. i will contact you as soon as possible