{"id":15686959,"url":"https://github.com/patrickjs/angular-example-basic-form","last_synced_at":"2025-09-10T11:36:59.566Z","repository":{"id":28141962,"uuid":"31641875","full_name":"PatrickJS/angular-example-basic-form","owner":"PatrickJS","description":"An AngularJS example for a basic signup form example ","archived":false,"fork":false,"pushed_at":"2015-03-18T18:02:16.000Z","size":182,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"gh-pages","last_synced_at":"2025-05-07T18:56:36.962Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://gdi2290.net/angular-example-basic-form/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PatrickJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-04T06:28:10.000Z","updated_at":"2020-11-24T11:04:03.000Z","dependencies_parsed_at":"2022-09-22T06:33:09.447Z","dependency_job_id":null,"html_url":"https://github.com/PatrickJS/angular-example-basic-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PatrickJS/angular-example-basic-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-example-basic-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-example-basic-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-example-basic-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-example-basic-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PatrickJS","download_url":"https://codeload.github.com/PatrickJS/angular-example-basic-form/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-example-basic-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274455669,"owners_count":25288557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-10T02:00:12.551Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T17:42:05.458Z","updated_at":"2025-09-10T11:36:59.412Z","avatar_url":"https://github.com/PatrickJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-example-basic-form\nAn AngularJS example for a basic signup form example using ngMessages, $pending, $validators, $asyncValidators, ng-model-options, and match password\n\n[Edit via plunker](http://plnkr.co/edit/fIHr3BjcrfyPwodnRhrh?p=preview)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml ng-app=\"App\"\u003e\n\u003chead\u003e\n  \u003ctitle\u003eangular-example-basic-form\u003c/title\u003e\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-mocks.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"fake-server.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\n\u003c/head\u003e\n\u003cbody ng-controller=\"LoginController\"\u003e\n\u003ch1\u003eangular-example-basic-form\u003c/h1\u003e\n\u003cform autocomplete=\"off\" novalidate\n  name=\"userForm\" \n  ng-submit=\"userForm.$valid \u0026\u0026 submit(user, userForm)\"\n  ng-disabled=\"loading\"\n\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003e\n      \u003clabel\u003e\n        Sign Up Free\n      \u003c/label\u003e\n    \u003c/legend\u003e\n    \n    \u003cp\u003e\n      \u003clabel\u003e\n        Email:\n        \u003cinput type=\"email\" \n          name=\"userEmail\"\n          ng-model=\"user.email\"\n          ng-model-options=\"{\n            updateOn: 'default blur',\n            debounce: {\n              'default': 500,\n              'blur': 0\n            }\n          }\"\n          unique-email\n          autofocus\n          required\u003e\n        \u003csmall ng-show=\"userForm.userEmail.$pending.uniqueEmail\"\u003eValliding Email...\u003c/small\u003e\n      \u003c/label\u003e\n      \u003cdiv ng-if=\"userForm.$submitted \u0026\u0026 userForm.userEmail.$touched\"\n           ng-messages=\"userForm.userEmail.$error\"\n           ng-messages-multiple\u003e\n        \u003cdiv ng-message=\"required\"\u003eYou did not enter your email address\u003c/div\u003e\n        \u003cdiv ng-message=\"email\"\u003eYou did not enter a valid email address\u003c/div\u003e\n        \u003cdiv ng-message=\"uniqueEmail\"\u003eYour email address is already taken\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/p\u003e\n\n    \u003cp\u003e\n      \u003clabel\u003e\n        Password:\n        \u003cinput type=\"password\"\n          name=\"userPassword\"\n          ng-model=\"user.password\"\n          ng-minlength=\"6\"\n          validate-password-characters\n          required\u003e\n      \u003c/label\u003e\n      \u003cdiv ng-if=\"userForm.$submitted \u0026\u0026 userForm.userPassword.$touched\"\n           ng-messages=\"userForm.userPassword.$error\"\n           ng-messages-multiple\u003e\n        \u003cdiv ng-message=\"required\"\u003eYou did not enter your password\u003c/div\u003e\n        \u003cdiv ng-message=\"minlength\"\u003eYour password is too short\u003c/div\u003e\n        \u003cdiv ng-message=\"passwordCharacters\"\u003ePlease use valid password characters\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/p\u003e\n      \n    \u003cp\u003e\n      \u003clabel\u003e\n        Confirm Password:\n        \u003cinput type=\"password\"\n          name=\"confirmPassword\" \n          ng-model=\"confirmPassword\"\n          match-password=\"userPassword\"\n          validate-password-characters\n          required\u003e\n      \u003c/label\u003e\n      \u003cdiv ng-if=\"userForm.$submitted \u0026\u0026 userForm.confirmPassword.$touched\"\n           ng-messages=\"userForm.confirmPassword.$error\"\n           ng-messages-multiple\u003e\n        \u003cdiv ng-message=\"required\"\u003eYou did not enter a confirmation password\u003c/div\u003e\n        \u003cdiv ng-message=\"passwordMatch\"\u003eYour two passwords did not match\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/p\u003e\n    \n    \u003cbutton type=\"submit\" ng-disabled=\"loading\"\u003e\n      Signup\n    \u003c/button\u003e\n    \u003cinput type=\"reset\" ng-click=\"reset(userForm)\" value=\"Reset\"\u003e\n      \n  \u003c/fieldset\u003e\n\u003c/form\u003e\n\u003cbr\u003e\n\u003ccenter\u003e\t\t\n  Example Built by \u003ca href=\"https://twitter.com/gdi2290\"\u003e@gdi2290\u003c/a\u003e\t\t\n\u003c/center\u003e\t\t\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n```javascript\nangular.module('App', [\n  'ngMessages',\n  'fake-server'  // ignore me \n])\n.controller('LoginController', function($scope, Auth, $window) {\n\n  $scope.loading = false;\n  $scope.user = {\n    email: null,\n    password: null\n  };\n  \n  $scope.reset = function(form) {\n    $scope.user = {\n      email: null,\n      password: null\n    };\n    $scope.confirmPassword = null\n    form.$setPristine();\n    form.$setUntouched();\n    form.$valid = true;\n    form.$invalid = false;\n    form.$error = {};\n  };\n\n  $scope.submit = function(user, form) {\n    $scope.loading = true;\n    Auth.signup(user)\n    .then(function(data) {\n      $scope.reset(form);\n      console.log('User Login', user);\n      $window.alert('Thanks you ' + user.email + ' for signing up');\n      // redirect etc\n      // $state.go('app.home')\n    })\n    .catch(function(err) {\n      $window.alert(err);\n    })\n    .finally(function() {\n      $scope.loading = false;\n    });\n  };\n\n})\n.factory('Auth', function($q, $http) {\n  var authenticated = false;\n  return {\n    isAuthenticated: function() {\n      return authenticated;\n    },\n    signup: function(user) {\n      return $http.post('/api/signup', {\n        email: user.email,\n        password: user.password\n      })\n      .then(function(res) {\n        // do something here\n        authenticated = true;\n        return res.data;\n      })\n      .catch(function(res) {\n        throw res.data;\n      });\n    } // end return\n  }; // end return\n\n})\n.directive('matchPassword', function() {\n  return {\n    restrict: 'A',\n    require: ['^ngModel', '^form'],\n    link: function(scope, element, attrs, ctrls) {\n      var formController = ctrls[1];\n      var ngModel = ctrls[0];\n      var otherPasswordModel = formController[attrs.matchPassword];\n  \n      ngModel.$validators.passwordMatch = function(modelValue, viewValue) {\n        var password = modelValue || viewValue;\n        var otherPassword = otherPasswordModel.$modelValue || otherPasswordModel.viewValue;\n        return password === otherPassword;\n      };\n\n    } // end link\n  }; // end return\n})\n.directive('validatePasswordCharacters', function() {\n\n  var REQUIRED_PATTERNS = [\n    // /\\d+/,    //numeric values\n    // /[a-z]+/, //lowercase values\n    // /[A-Z]+/, //uppercase values\n    // /\\W+/,    //special characters\n    /^\\S+$/   //no whitespace allowed\n  ];\n\n  return {\n    require : 'ngModel',\n    link : function($scope, element, attrs, ngModel) {\n      ngModel.$validators.passwordCharacters = function(value) {\n        var status = true;\n        angular.forEach(REQUIRED_PATTERNS, function(pattern) {\n          status = status \u0026\u0026 pattern.test(value);\n        });\n        return status;\n      }; \n    } // end link\n  }; // end return\n\n})\n.directive('uniqueEmail', function($http, $q) {\n  return {\n    require : 'ngModel',\n    link : function($scope, element, attrs, ngModel) {\n      ngModel.$asyncValidators.uniqueEmail = function(modelValue, viewValue) {\n        var email = modelValue || viewValue;\n        return $http.post('/api/unique-email', {email: email}).then(function(res) {\n          if (res.data.exists) {\n            return $q.reject();\n          }\n          return $q.when();\n        });\n      }; // end async\n    } // end link\n  }; // end return \n\n});\n```\n\n\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n[![AngularClass](https://angularclass.com/images/ng-crown.svg  \"Angular Class\")](https://angularclass.com)\n##[AngularClass](https://angularclass.com)\n\u003e Learn Angular in 2 days from the best\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickjs%2Fangular-example-basic-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickjs%2Fangular-example-basic-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickjs%2Fangular-example-basic-form/lists"}