+
Numbers code
+
-
- Current value: {{ numberCode.value | json }}
- Value changes: {{ numberCode.valueChanges | async | json }}
- Valid: {{ numberCode.valid }}
-
+
+ Current value: {{ numberCodeControl.value | json }}
+ Value changes: {{ numberCodeControl.valueChanges | async | json }}
+ Valid: {{ numberCodeControl.valid }}
+
-
-
-
-
-
+
+
+
+
+
-
Password (hidden) code
+
+
Password (hidden) code
-
+
-
- Current value: {{ passwordCode.value | json }}
- Value changes: {{ passwordCode.valueChanges | async | json }}
- Valid: {{ passwordCode.valid }}
-
+
+ Current value: {{ passwordCodeControl.value | json }}
+ Value changes:
+ {{ passwordCodeControl.valueChanges | async | json }}
+ Valid: {{ passwordCodeControl.valid }}
+
-
-
-
-
-
+
+
+
+
-
+
diff --git a/apps/playground/src/app/demos/pass-code/pass-code.component.scss b/apps/playground/src/app/demos/pass-code/pass-code.component.scss
index cc36a14..2e2b43e 100644
--- a/apps/playground/src/app/demos/pass-code/pass-code.component.scss
+++ b/apps/playground/src/app/demos/pass-code/pass-code.component.scss
@@ -1,12 +1,10 @@
:host {
- .demo-container {
- display: flex;
- flex-flow: row wrap;
- justify-content: center;
- align-items: center;
- padding: 20px 0;
- row-gap: 40px;
- }
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+ align-items: center;
+ padding: 20px 0;
+ row-gap: 40px;
.showcase {
display: flex;
diff --git a/apps/playground/src/app/demos/pass-code/pass-code.component.ts b/apps/playground/src/app/demos/pass-code/pass-code.component.ts
index e37eded..3b415f5 100644
--- a/apps/playground/src/app/demos/pass-code/pass-code.component.ts
+++ b/apps/playground/src/app/demos/pass-code/pass-code.component.ts
@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { FormControl, FormGroup, Validators } from '@angular/forms'
+import { FormControl, Validators } from '@angular/forms'
@Component({
selector: 'ngx-libs-workspace-pass-code-demo',
@@ -8,15 +8,13 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PassCodeDemoComponent {
- form = new FormGroup({
- textCode: new FormControl('76', { validators: [Validators.required] }),
- numberCode: new FormControl(''),
- passwordCode: new FormControl('mypass1', {
- validators: [Validators.required]
- })
+ protected textCodeControl = new FormControl
('76', {
+ validators: [Validators.required]
+ })
+ protected numberCodeControl = new FormControl(null, {
+ validators: [Validators.required]
+ })
+ protected passwordCodeControl = new FormControl('mypass1', {
+ validators: [Validators.required]
})
-
- textCode = this.form.get('textCode') as FormControl
- numberCode = this.form.get('numberCode') as FormControl
- passwordCode = this.form.get('passwordCode') as FormControl
}
diff --git a/libs/ngx-pass-code/CHANGELOG.md b/libs/ngx-pass-code/CHANGELOG.md
index f14f1a3..f4e208a 100644
--- a/libs/ngx-pass-code/CHANGELOG.md
+++ b/libs/ngx-pass-code/CHANGELOG.md
@@ -19,3 +19,7 @@ features.
### 1.1.1 - 19.02.2023
Small code improvements.
+
+### 1.1.2 - 20.02.2023
+
+Small code refactoring. Code cleanup.
diff --git a/libs/ngx-pass-code/package.json b/libs/ngx-pass-code/package.json
index 5324f17..91248b9 100644
--- a/libs/ngx-pass-code/package.json
+++ b/libs/ngx-pass-code/package.json
@@ -1,6 +1,6 @@
{
"name": "ngx-pass-code",
- "version": "1.1.1",
+ "version": "1.1.2",
"peerDependencies": {
"@angular/common": "^12.0.0",
"@angular/core": "^12.0.0"
diff --git a/libs/ngx-pass-code/src/lib/component/pass-code.component.ts b/libs/ngx-pass-code/src/lib/component/pass-code.component.ts
index 9c8fe62..695f3d9 100644
--- a/libs/ngx-pass-code/src/lib/component/pass-code.component.ts
+++ b/libs/ngx-pass-code/src/lib/component/pass-code.component.ts
@@ -40,7 +40,7 @@ export class PassCodeComponent
@Input() autoblur = false // remove focus from last input when filled
passCodes!: FormArray
- isCodeInvalid = false // validation is triggered only if all controls are invalid
+ isCodeInvalid = false // validation ui is shown only if all controls are invalid
private initialized = false
private unsubscribe$ = new Subject()
@@ -80,7 +80,7 @@ export class PassCodeComponent
asyncScheduler.schedule(() => {
this.initialized = true
this.propagateModelValueToView(stringifyTrimmedValue)
- this.cdRef.markForCheck()
+ this.cdRef.markForCheck() // because of scheduling
})
} else {
this.propagateModelValueToView(stringifyTrimmedValue)
@@ -137,10 +137,6 @@ export class PassCodeComponent
}
private updateParentControlValidation(): void {
- if (!this.parentControl) {
- return
- }
-
this.parentControl.setValidators(this.validate.bind(this))
this.parentControl.updateValueAndValidity({ emitEvent: false })
}
@@ -191,7 +187,7 @@ export class PassCodeComponent
distinctUntilChanged(),
takeUntil(this.unsubscribe$)
)
- .subscribe((value: string | number | null) => this.onChange(value))
+ .subscribe(this.onChange)
}
private updatePassCodeValidity(): void {