├── .gitignore
├── .vscode
├── settings.json
└── tasks.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── app
├── app.component.css
├── app.component.ts
├── app.module.ts
├── customers
│ ├── customer.component.html
│ ├── customer.component.ts
│ └── customer.ts
├── main.ts
└── shared
│ └── generic-validator.ts
├── favicon.ico
├── index.html
├── package.json
├── systemjs.config.js
├── tsconfig.json
└── tslint.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Generated files
2 | **/app/**/*.js
3 | **/app/**/*.map
4 |
5 | # Logs
6 | logs
7 | *.log
8 | npm-debug.log*
9 |
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 |
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 |
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 |
21 | # nyc test coverage
22 | .nyc_output
23 |
24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
25 | .grunt
26 |
27 | # node-waf configuration
28 | .lock-wscript
29 |
30 | # Compiled binary addons (http://nodejs.org/api/addons.html)
31 | build/Release
32 |
33 | # Dependency directories
34 | node_modules
35 | jspm_packages
36 |
37 | # Optional npm cache directory
38 | .npm
39 |
40 | # Optional REPL history
41 | .node_repl_history
42 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "files.exclude": {
4 | "**/.git": true,
5 | "**/.DS_Store": true,
6 | "**/app/**/*.js": true,
7 | "**/*.map": true
8 | },
9 | // Controls auto save of dirty files. Accepted values: "off", "afterDelay", "onFocusChange". If set to "afterDelay" you can configure the delay in "files.autoSaveDelay".
10 | "files.autoSave": "afterDelay"
11 | }
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | // Available variables which can be used inside of strings.
2 | // ${workspaceRoot}: the root folder of the team
3 | // ${file}: the current opened file
4 | // ${fileBasename}: the current opened file's basename
5 | // ${fileDirname}: the current opened file's dirname
6 | // ${fileExtname}: the current opened file's extension
7 | // ${cwd}: the current working directory of the spawned process
8 |
9 | // A task runner that calls the Typescript compiler (tsc) and
10 | // Compiles a HelloWorld.ts program
11 | {
12 | "version": "0.1.0",
13 |
14 | // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
15 | "command": "tsc",
16 |
17 | // The command is a shell script
18 | "isShellCommand": true,
19 |
20 | // Show the output window only if unrecognized errors occur.
21 | "showOutput": "silent",
22 |
23 | // args is the HelloWorld program to compile.
24 | "args": [ ],
25 |
26 | // use the standard tsc problem matcher to find compile problems
27 | // in the output.
28 | "problemMatcher": "$tsc"
29 | }
30 |
31 | // A task runner that calls the Typescript compiler (tsc) and
32 | // compiles based on a tsconfig.json file that is present in
33 | // the root of the folder open in VSCode
34 | /*
35 | {
36 | "version": "0.1.0",
37 |
38 | // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
39 | "command": "tsc",
40 |
41 | // The command is a shell script
42 | "isShellCommand": true,
43 |
44 | // Show the output window only if unrecognized errors occur.
45 | "showOutput": "silent",
46 |
47 | // Tell the tsc compiler to use the tsconfig.json from the open folder.
48 | "args": ["-p", "."],
49 |
50 | // use the standard tsc problem matcher to find compile problems
51 | // in the output.
52 | "problemMatcher": "$tsc"
53 | }
54 | */
55 |
56 | // A task runner configuration for gulp. Gulp provides a less task
57 | // which compiles less to css.
58 | /*
59 | {
60 | "version": "0.1.0",
61 | "command": "gulp",
62 | "isShellCommand": true,
63 | "tasks": [
64 | {
65 | "taskName": "less",
66 | // Make this the default build command.
67 | "isBuildCommand": true,
68 | // Show the output window only if unrecognized errors occur.
69 | "showOutput": "silent",
70 | // Use the standard less compilation problem matcher.
71 | "problemMatcher": "$lessCompile"
72 | }
73 | ]
74 | }
75 | */
76 |
77 | // Uncomment the following section to use jake to build a workspace
78 | // cloned from https://github.com/Microsoft/TypeScript.git
79 | /*
80 | {
81 | "version": "0.1.0",
82 | // Task runner is jake
83 | "command": "jake",
84 | // Need to be executed in shell / cmd
85 | "isShellCommand": true,
86 | "showOutput": "silent",
87 | "tasks": [
88 | {
89 | // TS build command is local.
90 | "taskName": "local",
91 | // Make this the default build command.
92 | "isBuildCommand": true,
93 | // Show the output window only if unrecognized errors occur.
94 | "showOutput": "silent",
95 | // Use the redefined Typescript output problem matcher.
96 | "problemMatcher": [
97 | "$tsc"
98 | ]
99 | }
100 | ]
101 | }
102 | */
103 |
104 | // Uncomment the section below to use msbuild and generate problems
105 | // for csc, cpp, tsc and vb. The configuration assumes that msbuild
106 | // is available on the path and a solution file exists in the
107 | // workspace folder root.
108 | /*
109 | {
110 | "version": "0.1.0",
111 | "command": "msbuild",
112 | "args": [
113 | // Ask msbuild to generate full paths for file names.
114 | "/property:GenerateFullPaths=true"
115 | ],
116 | "taskSelector": "/t:",
117 | "showOutput": "silent",
118 | "tasks": [
119 | {
120 | "taskName": "build",
121 | // Show the output window only if unrecognized errors occur.
122 | "showOutput": "silent",
123 | // Use the standard MS compiler pattern to detect errors, warnings
124 | // and infos in the output.
125 | "problemMatcher": "$msCompile"
126 | }
127 | ]
128 | }
129 | */
130 |
131 | // Uncomment the following section to use msbuild which compiles Typescript
132 | // and less files.
133 | /*
134 | {
135 | "version": "0.1.0",
136 | "command": "msbuild",
137 | "args": [
138 | // Ask msbuild to generate full paths for file names.
139 | "/property:GenerateFullPaths=true"
140 | ],
141 | "taskSelector": "/t:",
142 | "showOutput": "silent",
143 | "tasks": [
144 | {
145 | "taskName": "build",
146 | // Show the output window only if unrecognized errors occur.
147 | "showOutput": "silent",
148 | // Use the standard MS compiler pattern to detect errors, warnings
149 | // and infos in the output.
150 | "problemMatcher": [
151 | "$msCompile",
152 | "$lessCompile"
153 | ]
154 | }
155 | ]
156 | }
157 | */
158 | // A task runner example that defines a problemMatcher inline instead of using
159 | // a predefined one.
160 | /*
161 | {
162 | "version": "0.1.0",
163 | "command": "tsc",
164 | "isShellCommand": true,
165 | "args": ["HelloWorld.ts"],
166 | "showOutput": "silent",
167 | "problemMatcher": {
168 | // The problem is owned by the typescript language service. Ensure that the problems
169 | // are merged with problems produced by Visual Studio's language service.
170 | "owner": "typescript",
171 | // The file name for reported problems is relative to the current working directory.
172 | "fileLocation": ["relative", "${cwd}"],
173 | // The actual pattern to match problems in the output.
174 | "pattern": {
175 | // The regular expression. Matches HelloWorld.ts(2,10): error TS2339: Property 'logg' does not exist on type 'Console'.
176 | "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
177 | // The match group that denotes the file containing the problem.
178 | "file": 1,
179 | // The match group that denotes the problem location.
180 | "location": 2,
181 | // The match group that denotes the problem's severity. Can be omitted.
182 | "severity": 3,
183 | // The match group that denotes the problem code. Can be omitted.
184 | "code": 4,
185 | // The match group that denotes the problem's message.
186 | "message": 5
187 | }
188 | }
189 | }
190 | */
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # (2016-11-01)
2 |
3 | ### Changes
4 | * Add ViewChildren to access the blur event so required field validation messages can appear on blur.
5 | Thanks to Brandon Roberts who provided this technique.
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Deborah Kurata
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-generic-validator
2 | Defines a generic validator for Angular 2 Reactive Forms
3 |
4 | The generic validator resides in shared/generic-validator.ts.
5 | The customer component is provided as an example usage of the generic validator.
6 |
7 |
8 |
--------------------------------------------------------------------------------
/app/app.component.css:
--------------------------------------------------------------------------------
1 | li {
2 | font-size: large;
3 | }
4 |
5 | div.panel-heading {
6 | font-size: x-large;
7 | }
8 |
--------------------------------------------------------------------------------
/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |