Skip to content

Commit 8fb83ca

Browse files
why520crazywhy520crazy
committed
docs: add validators docs and examples
1 parent c958b5d commit 8fb83ca

32 files changed

+219
-3
lines changed

‎.docgeni/public/assets/favicon.ico

14.7 KB
Binary file not shown.

‎.docgeni/public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Ngx Validator</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<link rel="icon" type="image/x-icon" href="favicon.ico" />
8+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
99
</head>
1010
<body>
1111
<dg-root></dg-root>

‎.docgenirc.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
module.exports = {
55
mode: 'lite',
66
title: 'NGX-VALIDATOR',
7-
logoUrl: 'https://cdn.pingcode.com/open-sources/docgeni/logo.png',
7+
logoUrl: 'https://cdn.pingcode.com/open-sources/angular/angular.svg',
88
repoUrl: 'https://github.com/why520crazy/ngx-validator',
99
description: '',
1010
docsDir: 'docs',
1111
navs: [
1212
null,
1313
{
14-
title: 'Directives',
14+
title: 'Components',
1515
path: 'components',
1616
lib: 'core',
1717
locales: {

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"ng": "ng",
77
"start": "npm run start:docs",
88
"start:docs": "docgeni serve --port 4900",
9+
"build-docs": "docgeni serve --skip-site",
910
"build": "ng build core --prod",
1011
"build:docs": "docgeni build --prod --base-href=/ngx-validator/",
1112
"pub-only": "npm publish ./dist/core --access=public",

‎packages/core/examples/validator/api/en-us.js ‎packages/core/examples/form-validator/api/en-us.js

File renamed without changes.

‎packages/core/examples/validator/doc/en-us.md ‎packages/core/examples/form-validator/doc/en-us.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
2+
title: Form Validator
3+
name: validator
24
---
35

46
`[ngxFormValidator]` provide form validation config and validate feature.

‎packages/core/examples/validator/doc/zh-cn.md ‎packages/core/examples/form-validator/doc/zh-cn.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
2+
title: Form Validator
3+
name: validator
24
---
35

46
`[ngxFormValidator]` 在表单上配置验证规则

‎packages/core/examples/validator/examples/module.ts ‎packages/core/examples/form-validator/examples/module.ts

File renamed without changes.

‎packages/core/examples/validator/examples/reactive-driven/index.md ‎packages/core/examples/form-validator/examples/reactive-driven/index.md

File renamed without changes.

‎packages/core/examples/validator/examples/reactive-driven/reactive-driven.component.html ‎packages/core/examples/form-validator/examples/reactive-driven/reactive-driven.component.html

File renamed without changes.

‎packages/core/examples/validator/examples/reactive-driven/reactive-driven.component.scss ‎packages/core/examples/form-validator/examples/reactive-driven/reactive-driven.component.scss

File renamed without changes.

‎packages/core/examples/validator/examples/reactive-driven/reactive-driven.component.ts ‎packages/core/examples/form-validator/examples/reactive-driven/reactive-driven.component.ts

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/custom-select/custom-select.component.html ‎packages/core/examples/form-validator/examples/template-driven/custom-select/custom-select.component.html

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/custom-select/custom-select.component.scss ‎packages/core/examples/form-validator/examples/template-driven/custom-select/custom-select.component.scss

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/custom-select/custom-select.component.spec.ts ‎packages/core/examples/form-validator/examples/template-driven/custom-select/custom-select.component.spec.ts

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/custom-select/custom-select.component.ts ‎packages/core/examples/form-validator/examples/template-driven/custom-select/custom-select.component.ts

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/index.md ‎packages/core/examples/form-validator/examples/template-driven/index.md

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/template-driven.component.html ‎packages/core/examples/form-validator/examples/template-driven/template-driven.component.html

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/template-driven.component.scss ‎packages/core/examples/form-validator/examples/template-driven/template-driven.component.scss

File renamed without changes.

‎packages/core/examples/validator/examples/template-driven/template-driven.component.ts ‎packages/core/examples/form-validator/examples/template-driven/template-driven.component.ts

File renamed without changes.

‎packages/core/examples/validators/doc/en-us.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
---
3+
4+
`NgxValidator` support some validators:
5+
- `ngxMax` number max validator
6+
- `ngxMin` number min validator
7+
- `ngxUniqueCheck` remote unique check, e.g. username
8+
9+
## Max
10+
11+
<example name="ngx-validators-max-example" />
12+
13+
## Min
14+
15+
<example name="ngx-validators-min-example" />
16+
17+
## Unique Check
18+
19+
<example name="ngx-validators-unique-check-example" />

‎packages/core/examples/validators/doc/zh-cn.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
---
3+
4+
`NgxValidator` 提供了如下几种验证器
5+
- `ngxMax` 数字最大值
6+
- `ngxMin` 数字最小值
7+
- `ngxUniqueCheck` 远程唯一性验证，比如：验证用户名是否存在
8+
9+
## Max
10+
11+
<example name="ngx-validators-max-example" />
12+
13+
## Min
14+
15+
<example name="ngx-validators-min-example" />
16+
17+
## Unique Check
18+
19+
<example name="ngx-validators-unique-check-example" />

‎packages/core/examples/validators/examples/max/max.component.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<form name="exampleForm" novalidate #ngxFormValidator="ngxFormValidator" [ngxFormValidator]="validatorConfig">
2+
<div class="form-group">
3+
<label for="email1">Max</label>
4+
<input
5+
type="number"
6+
class="form-control"
7+
name="number-max"
8+
id="number-max"
9+
[(ngModel)]="value"
10+
required
11+
ngxMax="10"
12+
placeholder="Enter number (validators: ngxMax <= 10)"
13+
/>
14+
</div>
15+
<div class="form-group" *ngIf="message">
16+
<div class="alert alert-success">{{ message }}</div>
17+
</div>
18+
<div class="btn-groups">
19+
<button type="button" (ngxFormSubmit)="submit()" class="btn btn-primary">Submit</button>
20+
<button type="button" (click)="ngxFormValidator.validator.reset()" class="btn btn-info">Reset</button>
21+
</div>
22+
</form>

‎packages/core/examples/validators/examples/max/max.component.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.btn-groups {
2+
.btn {
3+
margin-right: 15px;
4+
}
5+
}

‎packages/core/examples/validators/examples/max/max.component.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { NgxValidatorConfig } from '@why520crazy/ngx-validator';
3+
4+
@Component({
5+
selector: 'ngx-validators-max-example',
6+
templateUrl: './max.component.html',
7+
styleUrls: ['./max.component.scss']
8+
})
9+
export class NgxValidatorsMaxExampleComponent implements OnInit {
10+
validatorConfig: NgxValidatorConfig;
11+
12+
value: number;
13+
14+
message: string;
15+
16+
constructor() {}
17+
18+
ngOnInit(): void {}
19+
20+
submit() {
21+
this.message = 'This form has submit';
22+
}
23+
}

‎packages/core/examples/validators/examples/min/min.component.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<form name="exampleForm" novalidate #ngxFormValidator="ngxFormValidator" [ngxFormValidator]="validatorConfig">
2+
<div class="form-group">
3+
<label for="email1">Min</label>
4+
<input
5+
type="number"
6+
class="form-control"
7+
name="number-min"
8+
id="number-min"
9+
[(ngModel)]="value"
10+
required
11+
ngxMin="10"
12+
placeholder="Enter number (validators: ngxMin > 10)"
13+
/>
14+
</div>
15+
<div class="form-group" *ngIf="message">
16+
<div class="alert alert-success">{{ message }}</div>
17+
</div>
18+
<div class="btn-groups">
19+
<button type="button" (ngxFormSubmit)="submit()" class="btn btn-primary">Submit</button>
20+
<button type="button" (click)="ngxFormValidator.validator.reset()" class="btn btn-info">Reset</button>
21+
</div>
22+
</form>

‎packages/core/examples/validators/examples/min/min.component.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.btn-groups {
2+
.btn {
3+
margin-right: 15px;
4+
}
5+
}

‎packages/core/examples/validators/examples/min/min.component.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { NgxValidatorConfig } from '@why520crazy/ngx-validator';
3+
4+
@Component({
5+
selector: 'ngx-validators-min-example',
6+
templateUrl: './min.component.html',
7+
styleUrls: ['./min.component.scss']
8+
})
9+
export class NgxValidatorsMinExampleComponent implements OnInit {
10+
validatorConfig: NgxValidatorConfig;
11+
12+
value: number;
13+
14+
message: string;
15+
16+
constructor() {}
17+
18+
ngOnInit(): void {}
19+
20+
submit() {
21+
this.message = 'This form has submit';
22+
}
23+
}

‎packages/core/examples/validators/examples/module.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { NgxValidatorModule } from '@why520crazy/ngx-validator';
4+
import { ReactiveFormsModule } from '@angular/forms';
5+
import { NgxValidatorsMinExampleComponent } from './min/min.component';
6+
import { NgxValidatorsMaxExampleComponent } from './max/max.component';
7+
import { NgxValidatorsUniqueCheckExampleComponent } from './unique-check/unique-check.component';
8+
9+
@NgModule({
10+
declarations: [
11+
NgxValidatorsMinExampleComponent,
12+
NgxValidatorsMaxExampleComponent,
13+
NgxValidatorsUniqueCheckExampleComponent
14+
],
15+
imports: [CommonModule, NgxValidatorModule, ReactiveFormsModule],
16+
exports: [],
17+
providers: []
18+
})
19+
export class NgxValidatorsExamplesModule {}

‎packages/core/examples/validators/examples/unique-check/unique-check.component.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<form name="exampleForm" novalidate #ngxFormValidator="ngxFormValidator" [ngxFormValidator]="validatorConfig">
2+
<div class="form-group">
3+
<label for="email1">Username</label>
4+
<input
5+
type="input"
6+
class="form-control"
7+
name="username"
8+
[(ngModel)]="value"
9+
required
10+
[ngxUniqueCheck]="uniqueCheck"
11+
placeholder="Enter username ('peter' is unique)"
12+
/>
13+
</div>
14+
<div class="form-group" *ngIf="message">
15+
<div class="alert alert-success">{{ message }}</div>
16+
</div>
17+
<div class="btn-groups">
18+
<button type="button" (ngxFormSubmit)="submit()" class="btn btn-primary">Submit</button>
19+
<button type="button" (click)="ngxFormValidator.validator.reset()" class="btn btn-info">Reset</button>
20+
</div>
21+
</form>

‎packages/core/examples/validators/examples/unique-check/unique-check.component.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.btn-groups {
2+
.btn {
3+
margin-right: 15px;
4+
}
5+
}

‎packages/core/examples/validators/examples/unique-check/unique-check.component.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { NgxValidatorConfig } from '@why520crazy/ngx-validator';
2+
import { Component, OnInit } from '@angular/core';
3+
import { of } from 'rxjs';
4+
5+
@Component({
6+
selector: 'ngx-validators-unique-check-example',
7+
templateUrl: './unique-check.component.html',
8+
styleUrls: ['./unique-check.component.scss']
9+
})
10+
export class NgxValidatorsUniqueCheckExampleComponent implements OnInit {
11+
validatorConfig: NgxValidatorConfig;
12+
13+
value: number;
14+
15+
message: string;
16+
17+
uniqueCheck = (value: string) => {
18+
return value === 'peter' ? of(true) : of(false);
19+
};
20+
21+
constructor() {}
22+
23+
ngOnInit(): void {}
24+
25+
submit() {
26+
this.message = 'This form has submit';
27+
}
28+
}

0 commit comments

Comments
 (0)