@@ -5,7 +5,9 @@ Directives for form validation (template or model driven).
5
5
6
6
# Installation
7
7
8
- Will be release on npm soon.
8
+ ``` bash
9
+ npm i ng4-validators --save
10
+ ```
9
11
10
12
# Validators
11
13
@@ -38,7 +40,6 @@ Will be release on npm soon.
38
40
- notEqual
39
41
- notEqualTo
40
42
- number
41
- - phone
42
43
- property
43
44
- range
44
45
- rangeLength
@@ -71,149 +72,140 @@ export class AppModule {
71
72
### rangeLength
72
73
73
74
``` html
74
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [rangeLength] =" [5, 9]" / >
75
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [rangeLength] =" [5, 9]" >
75
76
<p *ngIf =" field.errors?.rangeLength" >error message</p >
76
77
```
77
78
78
79
### min
79
80
80
81
``` html
81
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [min] =" 10" / >
82
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [min] =" 10" >
82
83
<p *ngIf =" field.errors?.min" >error message</p >
83
84
```
84
85
85
86
### gt
86
87
87
88
``` html
88
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [gt] =" 10" / >
89
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [gt] =" 10" >
89
90
<p *ngIf =" field.errors?.gt" >error message</p >
90
91
```
91
92
92
93
### gte
93
94
94
95
``` html
95
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [gte] =" 10" / >
96
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [gte] =" 10" >
96
97
<p *ngIf =" field.errors?.gte" >error message</p >
97
98
```
98
99
99
100
### max
100
101
101
102
``` html
102
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [max] =" 20" / >
103
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [max] =" 20" >
103
104
<p *ngIf =" field.errors?.max" >error message</p >
104
105
```
105
106
106
107
### lt
107
108
108
109
``` html
109
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [lt] =" 20" / >
110
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [lt] =" 20" >
110
111
<p *ngIf =" field.errors?.lt" >error message</p >
111
112
```
112
113
113
114
### lte
114
115
115
116
``` html
116
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [lte] =" 20" / >
117
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [lte] =" 20" >
117
118
<p *ngIf =" field.errors?.lte" >error message</p >
118
119
```
119
120
120
121
### range
121
122
122
123
``` html
123
- <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [range] =" [10, 20]" / >
124
+ <input type =" number" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [range] =" [10, 20]" >
124
125
<p *ngIf =" field.errors?.range" >error message</p >
125
126
```
126
127
127
128
### digits
128
129
129
130
``` html
130
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" digits / >
131
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" digits >
131
132
<p *ngIf =" field.errors?.digits" >error message</p >
132
133
```
133
134
134
135
### number
135
136
136
137
``` html
137
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" number / >
138
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" number >
138
139
<p *ngIf =" field.errors?.number" >error message</p >
139
140
```
140
141
141
142
### url
142
143
143
144
``` html
144
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" url / >
145
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" url >
145
146
<p *ngIf =" field.errors?.url" >error message</p >
146
147
```
147
148
148
149
### email
149
150
150
151
``` html
151
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" email / >
152
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" email >
152
153
<p *ngIf =" field.errors?.email" >error message</p >
153
154
```
154
155
155
156
### date
156
157
157
158
``` html
158
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" date / >
159
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" date >
159
160
<p *ngIf =" field.errors?.date" >error message</p >
160
161
```
161
162
162
163
### minDate
163
164
164
165
``` html
165
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" minDate =" 2016-09-09" / >
166
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" minDate =" 2016-09-09" >
166
167
<p *ngIf =" field.errors?.minDate" >error message</p >
167
168
```
168
169
169
170
### maxDate
170
171
171
172
``` html
172
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" maxDate =" 2016-09-09" / >
173
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" maxDate =" 2016-09-09" >
173
174
<p *ngIf =" field.errors?.maxDate" >error message</p >
174
175
```
175
176
176
177
### dateISO
177
178
178
179
``` html
179
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" dateISO / >
180
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" dateISO >
180
181
<p *ngIf =" field.errors?.dateISO" >error message</p >
181
182
```
182
183
183
184
### creditCard
184
185
185
186
``` html
186
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" creditCard / >
187
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" creditCard >
187
188
<p *ngIf =" field.errors?.creditCard" >error message</p >
188
189
```
189
190
190
191
### json
191
192
192
193
``` html
193
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" json / >
194
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" json >
194
195
<p *ngIf =" field.errors?.json" >error message</p >
195
196
```
196
197
197
198
### base64
198
199
199
200
``` html
200
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" base64 / >
201
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" base64 >
201
202
<p *ngIf =" field.errors?.base64" >error message</p >
202
203
```
203
204
204
- ### phone
205
-
206
- ``` html
207
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" phone =" CN" />
208
- <p *ngIf =" field.errors?.phone" >error message</p >
209
- ```
210
-
211
- details see [ libphonenumber] ( https://github.com/halt-hammerzeit/libphonenumber-js )
212
-
213
205
### uuid
214
206
215
207
``` html
216
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [uuid] =" 'all'" / >
208
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [uuid] =" 'all'" >
217
209
<p *ngIf =" field.errors?.uuid" >error message</p >
218
210
```
219
211
@@ -229,35 +221,46 @@ details see [libphonenumber](https://github.com/halt-hammerzeit/libphonenumber-j
229
221
### equal
230
222
231
223
``` html
232
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [equal] =" 'xxx'" / >
224
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [equal] =" 'xxx'" >
233
225
<p *ngIf =" field.errors?.equal" >error message</p >
234
226
```
235
227
236
228
### equal
237
229
238
230
``` html
239
- <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [notEqual] =" 'xxx'" / >
231
+ <input type =" text" [(ngModel)] =" model.field" name =" field" #field =" ngModel" [notEqual] =" 'xxx'" >
240
232
<p *ngIf =" field.errors?.notEqual" >error message</p >
241
233
```
242
234
243
235
### equalTo
244
236
245
237
``` html
246
- <input type =" password" ngModel name =" password" #password =" ngModel" required / >
238
+ <input type =" password" ngModel name =" password" #password =" ngModel" required >
247
239
<p *ngIf =" password.errors?.required" >required error</p >
248
- <input type =" password" ngModel name =" certainPassword" #certainPassword =" ngModel" [equalTo] =" password" / >
240
+ <input type =" password" ngModel name =" certainPassword" #certainPassword =" ngModel" [equalTo] =" password" >
249
241
<p *ngIf =" certainPassword.errors?.equalTo" >equalTo error</p >
250
242
```
251
243
252
244
### notEqualTo
253
245
254
246
``` html
255
- <input type =" text" ngModel name =" password" #password =" ngModel" required / >
247
+ <input type =" text" ngModel name =" password" #password =" ngModel" required >
256
248
<p *ngIf =" password.errors?.required" >required error</p >
257
- <input type =" password" ngModel name =" certainPassword" #certainPassword =" ngModel" [notEqualTo] =" password" / >
249
+ <input type =" password" ngModel name =" certainPassword" #certainPassword =" ngModel" [notEqualTo] =" password" >
258
250
<p *ngIf =" certainPassword.errors?.equalTo" >equalTo error</p >
259
251
```
260
252
253
+ ### property
254
+ ``` typescript
255
+ public obj = { id: 1 } // OK
256
+ public obj = { name: ' baguette' } // KO
257
+ ```
258
+
259
+ ``` html
260
+ <input type =" text" ngModel name =" obj" #obj =" ngModel" property =" id" >
261
+ <p *ngIf =" obj.errors?.property" >property error</p >
262
+ ```
263
+
261
264
## Model driven
262
265
263
266
import ` ReactiveFormsModule ` in * app.module.ts*
@@ -301,7 +304,7 @@ export class AppComponent {
301
304
```
302
305
303
306
``` html
304
- <input type =" text" formControlName =" field" / >
307
+ <input type =" text" formControlName =" field" >
305
308
<p *ngIf =" demoForm.from.controls.field.errors?.rangeLength" >error message</p >
306
309
```
307
310
@@ -407,12 +410,6 @@ new FormControl('', CustomValidators.json)
407
410
new FormControl (' ' , CustomValidators .base64 )
408
411
```
409
412
410
- ### phone
411
-
412
- ``` typescript
413
- new FormControl (' ' , CustomValidators .phone (' zh-CN' ))
414
- ```
415
-
416
413
### uuid
417
414
418
415
``` typescript
@@ -445,9 +442,9 @@ this.form = new FormGroup({
445
442
446
443
``` html
447
444
<form [formGroup] =" form" >
448
- <input type =" password" formControlName =" password" / >
445
+ <input type =" password" formControlName =" password" >
449
446
<p *ngIf =" form.controls.password.errors?.required" >required error</p >
450
- <input type =" password" formControlName =" certainPassword" / >
447
+ <input type =" password" formControlName =" certainPassword" >
451
448
<p *ngIf =" form.controls.certainPassword.errors?.equalTo" >equalTo error</p >
452
449
</form >
453
450
```
@@ -466,16 +463,16 @@ this.form = new FormGroup({
466
463
467
464
``` html
468
465
<form [formGroup] =" form" >
469
- <input type =" password" formControlName =" password" / >
466
+ <input type =" password" formControlName =" password" >
470
467
<p *ngIf =" form.controls.password.errors?.required" >required error</p >
471
- <input type =" password" formControlName =" certainPassword" / >
468
+ <input type =" password" formControlName =" certainPassword" >
472
469
<p *ngIf =" form.controls.certainPassword.errors?.notEqualTo" >notEqualTo error</p >
473
470
</form >
474
471
```
475
472
476
473
### property
477
474
``` typescript
478
- let obj = { id: 1 };
475
+ public obj = { id: 1 };
479
476
480
477
this .form = new FormGroup ({
481
478
obj: new FormControl (' ' , CustomValidators .property (' id' ))
@@ -484,11 +481,11 @@ this.form = new FormGroup({
484
481
485
482
``` html
486
483
<form [formGroup] =" form" >
487
- <input type =" text" formControlName =" obj" / >
484
+ <input type =" text" formControlName =" obj" >
488
485
<p *ngIf =" form.controls.obj.errors?.property" >property error</p >
489
486
</form >
490
487
```
491
488
492
- # License
493
-
494
- MIT
489
+ # For developpers
490
+ To run the projet : ` npm start `
491
+ Don't forget to run ` npm test ` and ` npm lint ` before each pull request. Thanks !
0 commit comments