Exploring ngForm

Developer
Robert Lowe
Size
7,554 Kb
Views
36,432
  1. Exploring ngForm Previews
  2. Exploring ngForm HTML Codes
  3. Exploring ngForm CSS Codes
  4. Exploring ngForm JS Codes

How do I make an exploring ngform?

Angular forms done the angular way.. What is a exploring ngform? How do you make a exploring ngform? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

Exploring ngForm Previews
IQ Test

Exploring ngForm - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Exploring ngForm</title> <link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/hint.css/1.3.5/hint.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-container" ng-app="simpleFormApp"> <simple-form ng-controller="simpleFormCtrl"></simple-form>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Exploring ngForm - Script Codes CSS Codes

*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Muli', sans-serif; margin: 0; padding: 1.5em; background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/small_tiles.png);
}
.simple-form { position: relative; display: flex; flex-flow: column nowrap; background-color: #fff; padding: 1.2em; box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3); border-radius: 0.3em;
}
.simple-form .form-step-headers { display: flex; flex-flow: row nowrap;
}
.simple-form .form-step-headers .step-header { position: relative; display: flex; flex-flow: row nowrap; background-color: #140F2D; color: white; margin: 0 1em 1.1em 0; padding: 1em; border-radius: 0.2em; cursor: pointer; line-height: 1.8em;
}
.simple-form .form-step-headers .step-header.active { background-color: #3F88C5; cursor: default;
}
.simple-form .form-step-headers .step-header.active::after { border-top-color: #3F88C5;
}
.simple-form .form-step-headers .step-header.valid .step-number { opacity: 0.4; margin-left: 0.3em;
}
.simple-form .form-step-headers .step-header.valid .step-status i { opacity: 0.9;
}
.simple-form .form-step-headers .step-header .step-number { font-size: 1.8em; font-weight: bold;
}
.simple-form .form-step-headers .step-header .step-name { margin-left: 0.5em;
}
.simple-form .form-step-headers .step-header .step-status { font-size: 1.8em; display: flex; align-items: center;
}
.simple-form .form-step-headers .step-header .step-status i { font-size: 1em; opacity: 0.2;
}
.simple-form .form-step-headers .step-header::after { content: ''; border: 0.9em solid #140F2D; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; position: absolute; bottom: -1.6em; width: 1.5em; height: 1.5em; left: 42%;
}
.simple-form .form-step { background-color: #fff; padding: 1.2em; box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3); border-radius: 0.3em; font-size: 1em;
}
.simple-form .form-step .form-step-banner { border-bottom: 0.1em solid rgba(0, 0, 0, 0.1); padding-bottom: 1em; font-size: 1.2em; font-weight: bold;
}
.simple-form .form-fields { display: flex; flex-flow: row wrap;
}
.simple-form .form-field { display: flex; min-width: 50%; flex-flow: row wrap; margin-bottom: 0.5em;
}
.simple-form .form-field .input-label { width: 100%; font-size: 0.8em; margin: 0.5em 0.5em 0.5em 0.2em; min-width: 6em; font-weight: bold;
}
.simple-form .form-field .input-label .optional { margin-left: 0.5em; font-size: 0.8em;
}
.simple-form .form-field .form-input-container { display: flex; flex-flow: row nowrap; flex-grow: 1;
}
.simple-form .form-field .validation { font-size: 0.7em; margin-left: 0.5em;
}
.simple-form .form-field .validation .error { color: red;
}
.simple-form .form-field .validation .success { color: green;
}
.simple-form .form-field .validation .validation-message { margin-top: 0.8em;
}
.simple-form .form-field input { flex-grow: 1; min-width: 12em; max-width: 22em; height: 2.4em; border: 0.1em solid #cccccc; border-radius: 0.5em; box-shadow: inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.07451); color: #555555; line-height: 2.4em; padding: 0.5em 1em 0.5em 1em; transition-delay: 0s, 0s; transition-duration: 0.15s, 0.15s; transition-property: border-color, box-shadow; transition-timing-function: ease-in-out, ease-in-out;
}
.simple-form .form-field input[type="number"] { line-height: 1em;
}
.simple-form .form-field textarea { width: 80%; min-height: 5em;
}
.simple-form .form-field input:focus, .simple-form .form-field textarea:focus { outline-color: transparent; border-color: #3F88C5;
}
.simple-form .form-submitter { display: flex; justify-content: flex-end; margin-top: 1em;
}
.simple-form .form-submitter .submit-status { margin-right: 1em; font-size: 0.9em;
}
.simple-form .form-submitter .submit-status .error { color: red;
}
.simple-form .form-submitter .submit-status .success { color: green;
}
.simple-form .form-submitter .submit-btn { border: none; box-shadow: none; background-color: #140F2D; color: white; font-size: 1.1em; padding: 0.8em 1em 0.8em 1em; cursor: pointer; border-radius: 0.2em; letter-spacing: 0.1em;
}
.simple-form .form-submitter .submit-btn:hover { background-color: #3F88C5;
}
@media (max-width: 700px) { .simple-form { flex-flow: row nowrap !important; padding-bottom: 5em; } .simple-form .form-step-headers { flex-flow: column nowrap !important; } .simple-form .form-step-headers .step-header { padding: 1em; min-width: 10em; align-items: center; } .simple-form .form-step-headers .step-header::after { display: none; } .simple-form .form-step .form-field { width: 100% !important; } .simple-form .form-step .form-field input, .simple-form .form-step .form-field textarea { width: 90% !important; } .simple-form .form-submitter { width: 100% !important; position: absolute; bottom: 1em; right: 1.2em; }
}
@media (max-width: 550px) { .simple-form { padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; box-shadow: none !important; background-color: transparent !important; } .simple-form .form-step-headers .step-header { min-width: 1em; justify-content: center; } .simple-form .form-step-headers .step-header .step-name { display: none; } .simple-form .form-submitter { right: 0 !important; } .simple-form .form-submitter .submit-status { display: none; } .simple-form .form-submitter .submit-btn { width: 100%; }
}
@media (max-width: 400px) { .simple-form { flex-flow: column nowrap !important; } .simple-form .form-step-headers { flex-flow: row nowrap !important; } .simple-form .form-step-headers .step-header { padding: 0.2em !important; min-width: 2em; margin-bottom: 0.5em !important; } .simple-form .form-step-headers .step-header .step-status { font-size: 1em; } .simple-form .form-step-headers .step-header .step-number { font-size: 1.2em; }
}

Exploring ngForm - Script Codes JS Codes

var SimpleFormApp = angular.module('simpleFormApp', ['ngSanitize']);
SimpleFormApp.controller('simpleFormCtrl', function($scope) { $scope.formValid = 'dunno'; $scope.activeStep = 1; // forms are built dynamcially based on this array of form steps $scope.steps = [ { tab: { number: 1, text: 'First Step' }, fields: [ { type: 'text', name: 'firstName', label: 'First Name', value: '', required: true, minlength: 1, maxlength: 50 }, { type: 'text', name: 'lastName', label: 'Last Name', value: '', required: true, minlength: 1, maxlength: 50 }, { type: 'text', name: 'nickname', label: 'Nickname', value: '' }, { type: 'date', name: 'startDate', label: 'Start Date', value: new Date(), min: new Date(2015, 0, 1), max: new Date(2015, 11, 31), required: true } ] }, { tab: { number: 2, text: 'Second Step' }, fields: [ { type: 'text', name: 'favoriteFood', label: 'Favorite Food', value: '', required: true }, { type: 'text', name: 'favoriteDrink', label: 'Favorite Drink', value: '', required: true }, { type: 'date', name: 'favoriteDay', label: 'Favorite Day', value: new Date(2015, 0, 1), required: true } ] }, { tab: { number: 3, text: 'Third Step' }, fields: [ { type: 'date', name: 'dateOne', label: 'Date One', value: new Date(2015, 0, 1), required: true }, { type: 'date', name: 'dateTwo', label: 'Date Two', value: new Date(2015, 0, 1) }, { type: 'textarea', name: 'description', label: 'Description', value: '', required: true } ] }, { tab: { number: 4, text: 'Fourth Step' }, fields: [ { type: 'number', name: 'powerLevel', label: 'Power Level', value: '', required: true, min: 1, max: 9000 }, { type: 'number', name: 'charLevel', label: 'Character Level', value: 1, required: true, min: 1, max: 99 }, { type: 'text', name: 'skillLevel', label: 'Skill Level', value: 1000 }, ] } ]; $scope.goToStep = function(step) { $scope.activeStep = step.tab.number; }; $scope.trySubmit = function() { var i, index, fieldList, field, formValid = true; // assume the form is valid and hunt for invalid fields // for each form step... for(i = 0; i < $scope.steps.length; i++) { fieldList = $scope.steps[i].fields; // for each field in that step... for(index in fieldList) { field = fieldList[index]; // if the field is invalid, the form is invalid if ($scope.myForm[field.name].$invalid) { formValid = false; break; } } if (!formValid) break; } // for demo display $scope.formValid = formValid; setTimeout($scope.reset, 2000); }; $scope.validFormSteps = function() { var i, fieldList, index, field, stepValid; // the goal here is to determine if all fields within a given step // are valid, and mark the step itself as valid or invalid accordingly for(i = 0; i < $scope.steps.length; i++) { // assume the step is valid until an invalid field is found stepValid = true; fieldList = $scope.steps[i].fields; for(index in fieldList) { field = fieldList[index]; // we can ignore fields that aren't flags as required if (typeof field.required === "undefined" || field.required === false) continue; // use angular's validation flags to easily determine if the field is valid if ($scope.myForm[field.name].$invalid) stepValid = false; } // set the step's valid flag $scope.steps[i].valid = stepValid; } }; $scope.reset = function() { $scope.formValid = 'dunno'; $scope.$apply(); }; // I want validation visuals to show up as soon as an input receives focus $scope.$on('input-focus', function(eventName, input) { $scope.myForm[input.name].$pristine = false; }); // I want form step validation to be performed any time an input looses focus $scope.$on('input-blur', $scope.validFormSteps);
});
SimpleFormApp.directive('simpleForm', function($timeout) { return { restrict: 'E', template: [ '<div class="simple-form" ng-form name="myForm" ng-submit="trySubmit()">', '<div class="form-step-headers">', '<div class="step-header" ng-repeat="step in steps" ng-class="{active: step.tab.number === activeStep, valid: step.valid}" ng-click="goToStep(step)">', '<div class="step-status" ng-show="step.valid === true"><i class="fa fa-check"></i></div>', '<div class="step-number">{{step.tab.number}}</div>', '<div class="step-name">{{step.tab.text}}</div>', '</div>', '</div>', '<div class="form-step" ng-repeat="step in steps" ng-show="activeStep === step.tab.number">', '<div class="form-step-banner">{{step.tab.text}}</div>', '<div class="form-fields">', '<div class="form-field" ng-repeat="field in step.fields">', '<input-label field="field"></input-label>', '<div class="form-input-container" ng-switch="field.type">', '<div ng-switch-when="text" text-input input="field"></div>', '<div ng-switch-when="date" date-input input="field"></div>', '<div ng-switch-when="number" number-input input="field"></div>', '<div ng-switch-when="textarea" textarea-input input="field"></div>', '<validation-message input="field"></validation-message>', '</div>', '</div>', '</div>', '</div>', '<div class="form-submitter">', '<div class="submit-status">', '<span class="success" ng-show="formValid === true">Form valid</span>', '<span class="error" ng-show="formValid === false">Form Invalid</span>', '</div>', '<input type="submit" class="submit-btn" ng-click="trySubmit()" />', '</div>', '</div>' ].join('') };
});
SimpleFormApp.directive('inputLabel', function() { return { restrict: 'E', replace: true, scope: { field: '=' }, template: '<div class="input-label">{{ field.label }}<span class="optional" ng-if="!field.required">(optional)</span></div>' };
});
SimpleFormApp.controller('inputCtrl', function($scope) { $scope.onFocus = function(input) { $scope.$emit('input-focus', input); }; $scope.onBlur = function(input) { $scope.$emit('input-blur', input); };
});
SimpleFormApp.controller('inputSelectCtrl', function($scope) { $scope.onFocus = function(input) { $scope.$emit('input-focus', input); }; $scope.onBlur = function(input) { $scope.$emit('input-blur', input); }; $scope.filterValueChanged = function(input, item) { if (!item) { $scope.filterValues[input.text.toLowerCase()] = ''; return; } $scope.filterValues[input.text.toLowerCase()] = item.id.toString(); };
});
SimpleFormApp.directive('textInput', function() { return { restrict: 'A', replace: true, controller: 'inputCtrl', scope: { input: '=' }, template: '<input type="text" ng-model="input.value" name="{{input.name}}" ng-required="input.required" ng-minlength="input.minlength" ng-maxlength="input.maxlength" ng-focus="onFocus(input)" ng-blur="onBlur(input)">', link: function(scope, element, attrs) { if (typeof scope.input.minlength === "undefined") scope.input.minlength = 1; if (typeof scope.input.maxlength === "undefined") scope.input.maxlength = 128; } };
});
SimpleFormApp.directive('numberInput', function() { return { restrict: 'A', replace: true, controller: 'inputCtrl', scope: { input: '=' }, template: '<input type="number" ng-model="input.value" name="{{input.name}}" min="{{input.min}}" max="{{input.max}}" ng-required="input.required" ng-focus="onFocus(input)" ng-blur="onBlur(input)"/>', link: function(scope, element, attrs) { if (typeof scope.input.min === "undefined") scope.input.min = -999999999999; if (typeof scope.input.max === "undefined") scope.input.max = 999999999999; } };
});
SimpleFormApp.directive('dateInput', function() { return { restrict: 'A', replace: true, controller: 'inputCtrl', scope: { input: '=' }, template: '<input type="date" ng-model="input.value" name="{{input.name}}" min="{{input.min | date: \'yyyy-MM-dd\'}}" max="{{input.max | date: \'yyyy-MM-dd\'}}" ng-required="input.required" ng-focus="onFocus(input)" ng-blur="onBlur(input)">', link: function(scope, element, attrs) { } };
});
SimpleFormApp.directive('textareaInput', function() { return { restrict: 'A', replace: true, controller: 'inputCtrl', scope: { input: '=' }, template: '<textarea ng-model="input.value" name="{{input.name}}" ng-required="input.required" ng-focus="onFocus(input)" ng-blur="onBlur(input)"></textarea>' };
});
SimpleFormApp.directive('selectInput', function() { return { restrict: 'A', replace: true, controller: 'selectInputCtrl', scope: { input: '=' }, template: [ '<ui-select ng-model="input.selectedValue" theme="bootstrap" on-select="filterValueChanged(filterItem, $model)">', '<ui-select-match placeholder="Select...">{{ $select.selected.text }}</ui-select-match>', '<ui-select-choices repeat="item in input.list | filter: $select.search">', '<div ng-bind-html="item.text"></div>', '</ui-select-choices>', '</ui-select>' ].join('') }
})
SimpleFormApp.directive('validationMessage', function() { return { restrict: 'E', replace: true, require: '^form', scope: { input: '=' }, template: ['<div class="validation">', // Invalid Messages '<div class="error" ng-if="input.required === true" ng-show="myForm[\'{{input.name}}\'].$error.required && myForm[\'{{input.name}}\'].$pristine === false">', '<div class="validation-message hint--left hint--error" data-hint="Required"><i class="fa fa-asterisk"></i></div>', '</div>', '<div class="error" ng-if="input.type === \'date\'" ng-show="myForm[\'{{input.name}}\'].$error.date">', '<div class="validation-message hint--left hint--error" data-hint="Invalid date"><i class="fa fa-times"></i></div>', '</div>', '<div class="error" ng-if="input.minlength !== undefined" ng-show="myForm[\'{{input.name}}\'].$error.minlength">', '<div class="validation-message hint--left hint--error" data-hint="Value too short"><i class="fa fa-times"></i></div>', '</div>', '<div class="error" ng-if="input.maxlength !== undefined" ng-show="myForm[\'{{input.name}}\'].$error.maxlength">', '<div class="validation-message hint--left hint--error" data-hint="Value too long"><i class="fa fa-times"></i></div>', '</div>', '<div class="error" ng-if="input.min !== undefined" ng-show="myForm[\'{{input.name}}\'].$error.min">', '<div class="validation-message hint--left hint--error" data-hint="Value too low"><i class="fa fa-times"></i></div>', '</div>', '<div class="error" ng-if="input.max !== undefined" ng-show="myForm[\'{{input.name}}\'].$error.max">', '<div class="validation-message hint--left hint--error" data-hint="Value too high"><i class="fa fa-times"></i></div>', '</div>', // Valid Messages '<div class="success" ng-if="input.required === true && input.type !== \'date\'" ng-show="myForm[\'{{input.name}}\'].$pristine === false && myForm[\'{{input.name}}\'].$valid === true">', '<div class="validation-message"><i class="fa fa-check"></i></div>', '</div>', '<div class="success" ng-if="input.type === \'date\' && input.required === true" ng-show="myForm[\'{{input.name}}\'].$pristine === false && !myForm[\'{{input.name}}\'].$error.date">', '<div class="validation-message"><i class="fa fa-check"></i></div>', '</div>', '</div>'].join(''), link: function(scope, element, attrs, formCtrl) { scope.myForm = formCtrl; } };
});
Exploring ngForm - Script Codes
Exploring ngForm - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 3.5
Size 7,554 Kb
Views 36,432
Do you need developer help for Exploring ngForm?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes
Name
Crazy Tables
Semantic Element Document Outline
Simple changelog display with AngularJS and Flexbox
Customizable ripples with angular
Whirlpool Spinner with 4 sizes
Learning to style range inputs
Testing Semantic UI Grid
The Rainball
Dynamic UI with AngularJS attributes
CSS Color Wheel Loaders
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!