Small code refactoring. Code cleanup.

dineeek · May 20, 2023 · 8e9f42f · 8e9f42f
1 parent afee0c8
commit 8e9f42f
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 85 deletions.
diff --git a/apps/playground/src/app/demos/pass-code/pass-code.component.html b/apps/playground/src/app/demos/pass-code/pass-code.component.html
@@ -1,70 +1,79 @@
-<form [formGroup]="form" class="demo-container">
-  <div class="showcase">
-    <span class="demo__case__title">Text code - required + upercase</span>
-    <ngx-pass-code
-      formControlName="textCode"
-      type="text"
-      [length]="5"
-      [uppercase]="true"
-      [autofocus]="true"
-    ></ngx-pass-code>
+<div class="showcase">
+  <span class="demo__case__title">Text code - required + upercase</span>
+  <ngx-pass-code
+    [formControl]="textCodeControl"
+    type="text"
+    [length]="5"
+    [uppercase]="true"
+    [autofocus]="true"
+  ></ngx-pass-code>
 
-    <div class="showcase__values">
-      <span>Current value: {{ textCode.value | json }}</span>
-      <span>Value changes: {{ textCode.valueChanges | async | json }}</span>
-      <span>Valid: {{ textCode.valid }}</span>
-    </div>
+  <div class="showcase__values">
+    <span>Current value: {{ textCodeControl.value | json }}</span>
+    <span
+      >Value changes: {{ textCodeControl.valueChanges | async | json }}</span
+    >
+    <span>Valid: {{ textCodeControl.valid }}</span>
+  </div>
 
-    <div class="showcase__actions">
-      <button (click)="textCode.reset(); textCode.enable()">Reset</button>
-      <button (click)="textCode.disable()">Disable</button>
-      <button (click)="textCode.patchValue('ACAB7')">Patch</button>
-    </div>
+  <div class="showcase__actions">
+    <button (click)="textCodeControl.reset(); textCodeControl.enable()">
+      Reset
+    </button>
+    <button (click)="textCodeControl.disable()">Disable</button>
+    <button (click)="textCodeControl.patchValue('ACAB7')">Patch</button>
   </div>
+</div>
 
-  <div class="showcase">
-    <span class="showcase__title">Numbers code</span>
-    <ngx-pass-code
-      [length]="5"
-      [autoblur]="true"
-      type="number"
-      formControlName="numberCode"
-    ></ngx-pass-code>
+<div class="showcase">
+  <span class="showcase__title">Numbers code</span>
+  <ngx-pass-code
+    [length]="5"
+    [autoblur]="true"
+    type="number"
+    [formControl]="numberCodeControl"
+  ></ngx-pass-code>
 
-    <div class="showcase__values">
-      <span>Current value: {{ numberCode.value | json }}</span>
-      <span>Value changes: {{ numberCode.valueChanges | async | json }}</span>
-      <span>Valid: {{ numberCode.valid }}</span>
-    </div>
+  <div class="showcase__values">
+    <span>Current value: {{ numberCodeControl.value | json }}</span>
+    <span
+      >Value changes: {{ numberCodeControl.valueChanges | async | json }}</span
+    >
+    <span>Valid: {{ numberCodeControl.valid }}</span>
+  </div>
 
-    <div class="showcase__actions">
-      <button (click)="numberCode.reset(); numberCode.enable()">Reset</button>
-      <button (click)="numberCode.disable()">Disable</button>
-      <button (click)="numberCode.patchValue('216582')">Patch</button>
-    </div>
+  <div class="showcase__actions">
+    <button (click)="numberCodeControl.reset(); numberCodeControl.enable()">
+      Reset
+    </button>
+    <button (click)="numberCodeControl.disable()">Disable</button>
+    <button (click)="numberCodeControl.patchValue(216582)">Patch</button>
   </div>
+</div>
 
-  <div class="showcase">
-    <span class="showcase__title">Password (hidden) code</span>
+<div class="showcase">
+  <span class="showcase__title">Password (hidden) code</span>
 
-    <ngx-pass-code
-      [length]="7"
-      type="password"
-      formControlName="passwordCode"
-    ></ngx-pass-code>
+  <ngx-pass-code
+    [length]="7"
+    type="password"
+    [formControl]="passwordCodeControl"
+  ></ngx-pass-code>
 
-    <div class="showcase__values">
-      <span>Current value: {{ passwordCode.value | json }}</span>
-      <span>Value changes: {{ passwordCode.valueChanges | async | json }}</span>
-      <span>Valid: {{ passwordCode.valid }}</span>
-    </div>
+  <div class="showcase__values">
+    <span>Current value: {{ passwordCodeControl.value | json }}</span>
+    <span
+      >Value changes:
+      {{ passwordCodeControl.valueChanges | async | json }}</span
+    >
+    <span>Valid: {{ passwordCodeControl.valid }}</span>
+  </div>
 
-    <div class="showcase__actions">
-      <button (click)="passwordCode.reset(); passwordCode.enable()">
-        Reset
-      </button>
-      <button (click)="passwordCode.disable()">Disable</button>
-      <button (click)="passwordCode.patchValue('my')">Patch</button>
-    </div>
+  <div class="showcase__actions">
+    <button (click)="passwordCodeControl.reset(); passwordCodeControl.enable()">
+      Reset
+    </button>
+    <button (click)="passwordCodeControl.disable()">Disable</button>
+    <button (click)="passwordCodeControl.patchValue('my')">Patch</button>
   </div>
-</form>
+</div>
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
@@ -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
@@ -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<string>('76', {
+    validators: [Validators.required]
+  })
+  protected numberCodeControl = new FormControl<number | null>(null, {
+    validators: [Validators.required]
+  })
+  protected passwordCodeControl = new FormControl<string>('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
@@ -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
@@ -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
@@ -40,7 +40,7 @@ export class PassCodeComponent
   @Input() autoblur = false // remove focus from last input when filled
 
   passCodes!: FormArray<FormControl>
-  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<void>()
@@ -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 {