forked from NG-ZORRO/ng-zorro-antd
-
Notifications
You must be signed in to change notification settings - Fork 0
/
validate-reactive.ts
128 lines (119 loc) · 5.18 KB
/
validate-reactive.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { Component } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms';
import { Observable, Observer } from 'rxjs';
@Component({
selector: 'nz-demo-form-validate-reactive',
template: `
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>Username</nz-form-label>
<nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
<input nz-input formControlName="userName" placeholder="async validate try to write JasonWood" />
<ng-template #userErrorTpl let-control>
<ng-container *ngIf="control.hasError('required')">Please input your username!</ng-container>
<ng-container *ngIf="control.hasError('duplicated')">The username is redundant!</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
<nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
<input nz-input formControlName="email" placeholder="email" type="email" />
<ng-template #emailErrorTpl let-control>
<ng-container *ngIf="control.hasError('email')">The input is not valid E-mail!</ng-container>
<ng-container *ngIf="control.hasError('required')">Please input your E-mail!</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>Password</nz-form-label>
<nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="Please input your password!">
<input nz-input type="password" formControlName="password" (ngModelChange)="validateConfirmPassword()" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>Confirm Password</nz-form-label>
<nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
<input nz-input type="password" formControlName="confirm" placeholder="confirm your password" />
<ng-template #passwordErrorTpl let-control>
<ng-container *ngIf="control.hasError('required')">Please confirm your password!</ng-container>
<ng-container *ngIf="control.hasError('confirm')">Password is inconsistent!</ng-container>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>Comment</nz-form-label>
<nz-form-control [nzSpan]="12" nzHasFeedback nzErrorTip="Please write something here!">
<nz-textarea-count [nzMaxCharacterCount]="2000">
<textarea formControlName="comment" nz-input rows="2" placeholder="write any thing"></textarea>
</nz-textarea-count>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="7" [nzSpan]="12">
<button nz-button nzType="primary" [disabled]="!validateForm.valid">Submit</button>
<button nz-button (click)="resetForm($event)">Reset</button>
</nz-form-control>
</nz-form-item>
</form>
`,
styles: [
`
[nz-form] {
max-width: 600px;
}
button {
margin-left: 8px;
}
`
]
})
export class NzDemoFormValidateReactiveComponent {
validateForm: UntypedFormGroup;
submitForm(): void {
console.log('submit', this.validateForm.value);
}
resetForm(e: MouseEvent): void {
e.preventDefault();
this.validateForm.reset();
for (const key in this.validateForm.controls) {
if (this.validateForm.controls.hasOwnProperty(key)) {
this.validateForm.controls[key].markAsPristine();
this.validateForm.controls[key].updateValueAndValidity();
}
}
}
validateConfirmPassword(): void {
setTimeout(() => this.validateForm.controls.confirm.updateValueAndValidity());
}
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
userNameAsyncValidator = (control: UntypedFormControl) =>
new Observable((observer: Observer<ValidationErrors | null>) => {
setTimeout(() => {
if (control.value === 'JasonWood') {
// you have to return `{error: true}` to mark it as an error event
observer.next({ error: true, duplicated: true });
} else {
observer.next(null);
}
observer.complete();
}, 1000);
});
confirmValidator = (control: UntypedFormControl): { [s: string]: boolean } => {
if (!control.value) {
return { error: true, required: true };
} else if (control.value !== this.validateForm.controls.password.value) {
return { confirm: true, error: true };
}
return {};
};
constructor(private fb: UntypedFormBuilder) {
this.validateForm = this.fb.group({
userName: ['', [Validators.required], [this.userNameAsyncValidator]],
email: ['', [Validators.email, Validators.required]],
password: ['', [Validators.required]],
confirm: ['', [this.confirmValidator]],
comment: ['', [Validators.required]]
});
}
}