Skip to content

Commit c2b7943

Browse files
NikGurevNikGurev
authored
chore(input): added example for password change form (#DS-3965) (#928)
1 parent 733a9f7 commit c2b7943

File tree

7 files changed

+150
-12
lines changed

7 files changed

+150
-12
lines changed

‎apps/docs/src/app/services/documentation-items.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ const DOCS: { [key: string]: DocsDocCategory[] } = {
374374
svgPreview: 'input',
375375
hasApi: true,
376376
apiId: 'input',
377-
hasExamples: false
377+
hasExamples: true
378378
},
379379
{
380380
id: 'file-upload',

‎packages/components-dev/input/module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ import { InputExamplesModule } from '../../docs-examples/components/input';
3737
<input-number-overview-example />
3838
<hr />
3939
<input-password-overview-example />
40+
<hr />
41+
<input-change-password-example />
4042
`,
4143
changeDetection: ChangeDetectionStrategy.OnPush
4244
})

‎packages/components/input/examples.input.en.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
🚧 **Documentation in progress** 🚧
1+
### Password change form
22

3-
Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
4-
5-
If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.
3+
<!-- example(input-change-password) -->

‎packages/components/input/examples.input.ru.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
🚧 **Документация в процессе написания** 🚧
1+
### Форма смены пароля
22

3-
К сожалению, документация для этого раздела еще не готова. Мы активно работаем над ее созданием и планируем добавить в ближайшее время.
4-
5-
Если вы хотите помочь в написании документации или у вас есть вопросы, пожалуйста, [создайте issue](https://github.com/koobiq/angular-components/issues) в нашем репозитории на GitHub.
3+
<!-- example(input-change-password) -->

‎packages/docs-examples/components/input/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { NgModule } from '@angular/core';
2+
import { InputChangePasswordExample } from './input-change-password/input-change-password-example';
23
import { InputNumberOverviewExample } from './input-number-overview/input-number-overview-example';
34
import { InputOverviewExample } from './input-overview/input-overview-example';
45
import { InputPasswordOverviewExample } from './input-password-overview/input-password-overview-example';
56

6-
export { InputNumberOverviewExample, InputOverviewExample, InputPasswordOverviewExample };
7+
export { InputChangePasswordExample, InputNumberOverviewExample, InputOverviewExample, InputPasswordOverviewExample };
78

89
const EXAMPLES = [
910
InputOverviewExample,
1011
InputNumberOverviewExample,
11-
InputPasswordOverviewExample
12+
InputPasswordOverviewExample,
13+
InputChangePasswordExample
1214
];
1315

1416
@NgModule({

‎packages/docs-examples/components/input/input-change-password/input-change-password-example.ts‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { ChangeDetectionStrategy, Component, DestroyRef, inject, Injectable } from '@angular/core';
2+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
3+
import {
4+
AbstractControl,
5+
FormControl,
6+
FormGroup,
7+
FormGroupDirective,
8+
NgForm,
9+
ReactiveFormsModule,
10+
ValidatorFn,
11+
Validators
12+
} from '@angular/forms';
13+
import { KbqButtonModule } from '@koobiq/components/button';
14+
import {
15+
ErrorStateMatcher,
16+
kbqDisableLegacyValidationDirectiveProvider,
17+
kbqErrorStateMatcherProvider
18+
} from '@koobiq/components/core';
19+
import { KbqFormFieldModule, KbqPasswordToggle } from '@koobiq/components/form-field';
20+
import { KbqInputModule } from '@koobiq/components/input';
21+
22+
@Injectable()
23+
class RequiredErrorStateMatcher implements ErrorStateMatcher {
24+
isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
25+
return !!(
26+
(control?.hasError('required') && form?.submitted) ||
27+
(control?.invalid && !control.hasError('required'))
28+
);
29+
}
30+
}
31+
32+
/**
33+
* @title Input change password
34+
*/
35+
@Component({
36+
changeDetection: ChangeDetectionStrategy.OnPush,
37+
standalone: true,
38+
selector: 'input-change-password-example',
39+
imports: [
40+
ReactiveFormsModule,
41+
KbqFormFieldModule,
42+
KbqInputModule,
43+
KbqPasswordToggle,
44+
KbqButtonModule
45+
],
46+
template: `
47+
<form class="layout-column layout-gap-m" [formGroup]="form">
48+
<kbq-form-field style="width: 250px">
49+
<input formControlName="newPassword" kbqInputPassword placeholder="Enter new password" />
50+
51+
<kbq-password-toggle [kbqTooltipHidden]="'Show password'" [kbqTooltipNotHidden]="'Hide password'" />
52+
53+
<kbq-hint>Password must not exceed 5 characters</kbq-hint>
54+
55+
@if (newPasswordControl.errors?.required) {
56+
<kbq-error>Required</kbq-error>
57+
}
58+
59+
@if (newPasswordControl.errors?.maxlength) {
60+
<kbq-error>Max Length</kbq-error>
61+
}
62+
</kbq-form-field>
63+
64+
<kbq-form-field style="width: 250px">
65+
<input formControlName="confirmNewPassword" kbqInputPassword placeholder="Confirm new password" />
66+
67+
<kbq-password-toggle [kbqTooltipHidden]="'Show password'" [kbqTooltipNotHidden]="'Hide password'" />
68+
69+
@if (confirmNewPasswordControl.errors?.required) {
70+
<kbq-error>Required</kbq-error>
71+
}
72+
73+
@if (confirmNewPasswordControl.errors?.maxlength) {
74+
<kbq-error>Max Length</kbq-error>
75+
}
76+
77+
@if (confirmNewPasswordControl.errors?.passwordsNotMatch) {
78+
<kbq-error>Not Match</kbq-error>
79+
}
80+
</kbq-form-field>
81+
82+
<div>
83+
<button kbq-button type="submit">ChangePassword</button>
84+
</div>
85+
</form>
86+
`,
87+
providers: [
88+
kbqDisableLegacyValidationDirectiveProvider(),
89+
kbqErrorStateMatcherProvider(RequiredErrorStateMatcher)]
90+
})
91+
export class InputChangePasswordExample {
92+
protected readonly destroyRef = inject(DestroyRef);
93+
protected readonly form: FormGroup<{
94+
newPassword: FormControl<string | null>;
95+
confirmNewPassword: FormControl<string | null>;
96+
}>;
97+
98+
protected get newPasswordControl(): AbstractControl {
99+
return this.form.controls.newPassword;
100+
}
101+
102+
protected get confirmNewPasswordControl(): AbstractControl {
103+
return this.form.controls.confirmNewPassword;
104+
}
105+
106+
constructor() {
107+
this.form = this.createForm();
108+
}
109+
110+
createForm() {
111+
const compareWith =
112+
(compareControlName: string): ValidatorFn =>
113+
(control: AbstractControl) => {
114+
const controlToCompareWith = control.parent?.get(compareControlName);
115+
const isValid = !control.value || controlToCompareWith?.value === control.value;
116+
117+
return isValid ? null : { passwordsNotMatch: { value: control.value } };
118+
};
119+
120+
const loginForm = new FormGroup({
121+
newPassword: new FormControl<string>('', [Validators.required, Validators.maxLength(5)]),
122+
confirmNewPassword: new FormControl<string>('', [
123+
Validators.required,
124+
Validators.maxLength(5),
125+
compareWith('newPassword')])
126+
});
127+
128+
// run validation for confirmNewPassword after newPassword changed
129+
loginForm
130+
.get('newPassword')
131+
?.statusChanges.pipe(takeUntilDestroyed(this.destroyRef))
132+
.subscribe(() => {
133+
loginForm.get('confirmNewPassword')?.updateValueAndValidity();
134+
});
135+
136+
return loginForm;
137+
}
138+
}

‎packages/docs-examples/components/input/input-password-overview/input-password-overview-example.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { KbqInputModule } from '@koobiq/components/input';
3636
</kbq-password-hint>
3737
3838
<kbq-password-hint [checkRule]="atLeastNCapitalLetters(5)" [rule]="passwordRules.Custom">
39-
не менее 5 заглавных букв
39+
Не менее 5 заглавных букв
4040
</kbq-password-hint>
4141
</kbq-form-field>
4242
`

0 commit comments

Comments
 (0)