From 42dde9c51b32975da7634146032bb350db7ee245 Mon Sep 17 00:00:00 2001 From: Santi Date: Sat, 19 Feb 2022 00:08:36 +0700 Subject: [PATCH] refactor: remove CVA and inject NgControl instead --- .../src/app/app.component.html | 13 +--- .../src/app/app.component.ts | 12 ++-- .../src/app/app.module.ts | 9 ++- .../src/app/my-input.component.ts | 60 +++++++++++++++++ projects/ngx-english-only/package.json | 2 +- .../ngx-english-only.directive.ts | 65 +++---------------- 6 files changed, 86 insertions(+), 75 deletions(-) create mode 100644 projects/ngx-english-only-app/src/app/my-input.component.ts diff --git a/projects/ngx-english-only-app/src/app/app.component.html b/projects/ngx-english-only-app/src/app/app.component.html index f14e5e3..f8ff060 100644 --- a/projects/ngx-english-only-app/src/app/app.component.html +++ b/projects/ngx-english-only-app/src/app/app.component.html @@ -481,17 +481,8 @@

Next Steps

-
- -
- - -
- -
-
- -
+
+ diff --git a/projects/ngx-english-only-app/src/app/app.component.ts b/projects/ngx-english-only-app/src/app/app.component.ts index c4d9cea..2a73a09 100644 --- a/projects/ngx-english-only-app/src/app/app.component.ts +++ b/projects/ngx-english-only-app/src/app/app.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { FormControl, Validators } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', @@ -8,12 +8,14 @@ import { FormControl, Validators } from '@angular/forms'; }) export class AppComponent { title = 'ngx-english-only-app'; - name = new FormControl('', Validators.required); - email = new FormControl('', Validators.email) + public nestedForm: FormGroup = new FormGroup({ + basicInfo: new FormControl("") + }); + constructor() { - this.name.setValue('test'); } + ngOnInit(): void { - this.name.valueChanges.subscribe(v => console.log(v)) + this.nestedForm.valueChanges.subscribe(v => console.log(v)) } } diff --git a/projects/ngx-english-only-app/src/app/app.module.ts b/projects/ngx-english-only-app/src/app/app.module.ts index 6b87ad7..431ab11 100644 --- a/projects/ngx-english-only-app/src/app/app.module.ts +++ b/projects/ngx-english-only-app/src/app/app.module.ts @@ -1,18 +1,23 @@ +import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { NgxEnglishOnlyModule } from 'projects/ngx-english-only/src/public-api'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { MyInputComponent } from './my-input.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + MyInputComponent ], imports: [ + CommonModule, BrowserModule, AppRoutingModule, + FormsModule, ReactiveFormsModule, NgxEnglishOnlyModule ], diff --git a/projects/ngx-english-only-app/src/app/my-input.component.ts b/projects/ngx-english-only-app/src/app/my-input.component.ts new file mode 100644 index 0000000..a670137 --- /dev/null +++ b/projects/ngx-english-only-app/src/app/my-input.component.ts @@ -0,0 +1,60 @@ +import { Component, forwardRef, OnInit } from '@angular/core'; +import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormGroup, FormControl, NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms'; + +@Component({ + selector: 'my-input', + template:` + + +
+ +
+ +
+ +
+ `, + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MyInputComponent ), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => MyInputComponent), + multi: true + } + ] +}) + +export class MyInputComponent implements OnInit, ControlValueAccessor, Validator { + public basicInfoForm: FormGroup = new FormGroup( + { + fname: new FormControl(""), + email: new FormControl("") + }); + constructor() { } + + ngOnInit() { + } + + public onTouched: () => void = () => {}; + + writeValue(val: any): void { + val && this.basicInfoForm.setValue(val, { emitEvent: false }); + } + registerOnChange(fn: any): void { + this.basicInfoForm.valueChanges.subscribe(fn); + } + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + setDisabledState?(isDisabled: boolean): void { + isDisabled ? this.basicInfoForm.disable() : this.basicInfoForm.enable(); + } + + validate(c: AbstractControl): ValidationErrors | null{ + return this.basicInfoForm.valid ? null : { invalidForm: {valid: false, message: "basicInfoForm fields are invalid"}}; + } +} \ No newline at end of file diff --git a/projects/ngx-english-only/package.json b/projects/ngx-english-only/package.json index 99be2b5..4244318 100644 --- a/projects/ngx-english-only/package.json +++ b/projects/ngx-english-only/package.json @@ -1,6 +1,6 @@ { "name": "ngx-english-only", - "version": "0.0.1", + "version": "0.0.2", "license": "MIT", "author": "Santi Lertsumran ", "repository": { diff --git a/projects/ngx-english-only/src/lib/directives/ngx-english-only/ngx-english-only.directive.ts b/projects/ngx-english-only/src/lib/directives/ngx-english-only/ngx-english-only.directive.ts index d856fe2..ba702a9 100644 --- a/projects/ngx-english-only/src/lib/directives/ngx-english-only/ngx-english-only.directive.ts +++ b/projects/ngx-english-only/src/lib/directives/ngx-english-only/ngx-english-only.directive.ts @@ -1,29 +1,15 @@ -import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Directive, HostListener } from '@angular/core'; +import { NgControl } from '@angular/forms'; @Directive({ - selector: '[englishOnly]', - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => NgxEnglishOnlyDirective), - multi: true - } - ], + selector: '[englishOnly]' }) -export class NgxEnglishOnlyDirective implements ControlValueAccessor { - private isDisabled = false; +export class NgxEnglishOnlyDirective { private readonly allowSpecialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowRight', 'ArrowLeft']; private readonly REGEX_EN: RegExp = /^[a-zA-Z0-9.\s?><;:",{}()[\]\-_+=!@#$%\^’‘&*|'/\\]*$/g; - onChangeFn: (value: any) => void = () => { - }; - - onTouchedFn = () => { - }; - - constructor(private elm: ElementRef, private renderer: Renderer2) { } + constructor(private control: NgControl) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { @@ -31,7 +17,7 @@ export class NgxEnglishOnlyDirective implements ControlValueAccessor { return; } - const current: string = this.elm.nativeElement.value; + const current: string = this.control.control?.value; const next: string = current.concat(event.key); if (next && !String(next).match(this.REGEX_EN)) { @@ -39,41 +25,8 @@ export class NgxEnglishOnlyDirective implements ControlValueAccessor { } } - @HostListener('blur', ['$event.target.value']) - onBlur(value: string) { - const replaced = Array.from(value).filter(v => v.match(this.REGEX_EN)).join(''); - this.elm.nativeElement.value = replaced; - this.onChangeFn(replaced); - this.onTouchedFn(); - } - - @HostListener('paste', ['$event']) - onPaste(event: ClipboardEvent) { - const clipboardData: DataTransfer | null = event.clipboardData; - const pastedDate: string = clipboardData?.getData('Text') || ''; - const current: string = this.elm.nativeElement.value; - const replaced = Array.from(current?.concat(pastedDate)).filter(v => v.match(this.REGEX_EN)).join(''); - this.onChangeFn(replaced); - } - - writeValue(value: string): void { - this.elm.nativeElement.value = value; - } - - registerOnChange(fn: any): void { - this.onChangeFn = fn; - } - - registerOnTouched(fn: () => void): void { - this.onTouchedFn = fn; - } - - setDisabledState(isDisabled: boolean): void { - this.isDisabled = isDisabled; - if (this.isDisabled) { - this.renderer.setProperty(this.elm.nativeElement, 'disabled', 'disabled'); - } else { - this.renderer.removeAttribute(this.elm.nativeElement, 'disabled'); - } + @HostListener('input', ['$event']) + onInputChange() { + this.control.control?.setValue(Array.from(this.control.control?.value as string || '').filter(v => v.match(this.REGEX_EN)).join('')); } }