feat: 🎸 add more examples

src/app/app.component.html

@@ -1,10 +1,22 @@
 <div>
-  <textarea [(ngModel)]="html" [controlValueTransformer]="'html-to-markdown'"></textarea>
+  <textarea [(ngModel)]="html" [controlValueTransformer]="'html-to-markdown'" [rewriteValueOnChange]="false"></textarea>
   <div [innerHTML]="html"></div>
 </div>
 <br />
 <br />
 <div>
-  <input [(ngModel)]="password" [controlValueTransformer]="'emoji-password'" [rewriteValueOnChange]="true" />
+  <input [(ngModel)]="password" [controlValueTransformer]="'emoji-password'" />
   <div>{{ password }}</div>
 </div>
+<br />
+<br />
+<div>
+  <input [(ngModel)]="url" [controlValueTransformer]="httpsPrefixTransformer" />
+  <div>{{ url }}</div>
+</div>
+<br />
+<br />
+<div>
+  <input [(ngModel)]="number" [controlValueTransformer]="'number'" />
+  <div>{{ number }}</div>
+</div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { PrefixTransformer } from './prefix.transformer';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,7 @@ import { Component } from '@angular/core';
 export class AppComponent {
   html: string;
   password: string;
+  number: number;
+  url: string;
+  httpsPrefixTransformer = new PrefixTransformer('https://');
 }

src/app/app.module.ts

@@ -8,14 +8,19 @@ import { AppComponent } from './app.component';
 
 import { HtmlToMarkdownTransformer } from './html-to-markdown.transformer';
 import { PasswordToEmojiTransformer } from './password-to-emoji.transformer';
+import { NumberTransformer } from './number.transformer';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
-    ControlValueTransformerModule.registerTransformers([HtmlToMarkdownTransformer, PasswordToEmojiTransformer]),
+    ControlValueTransformerModule.registerTransformers([
+      HtmlToMarkdownTransformer,
+      PasswordToEmojiTransformer,
+      NumberTransformer,
+    ]),
   ],
   bootstrap: [AppComponent],
 })

src/app/number.transformer.ts

@@ -0,0 +1,21 @@
+import { Injectable, Inject, LOCALE_ID } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+import { ControlValueTransformer, Transformer } from '@ngze/control-value-transformer';
+
+@Injectable()
+@ControlValueTransformer({
+  name: 'number',
+})
+export class NumberTransformer implements Transformer<number, string> {
+  private readonly decimalPipe = new DecimalPipe(this.localeId);
+
+  constructor(@Inject(LOCALE_ID) private readonly localeId: string) {}
+
+  toTarget(number: number): string {
+    return this.decimalPipe.transform(number);
+  }
+
+  toSource(string: string): number {
+    return Number(string.replace(/[^0-9 ]/g, ''));
+  }
+}

src/app/password-to-emoji.transformer.ts

@@ -1,23 +1,33 @@
+import { Inject, Injectable, InjectionToken } from '@angular/core';
 import { ControlValueTransformer, Transformer } from '@ngze/control-value-transformer';
 
+export const EMOJIS = new InjectionToken<string[]>('EMOJIS', {
+  providedIn: 'root',
+  factory: () => ['🤫', '🤐', '😷', '😑', '😶', '🤭'],
+});
+
+@Injectable()
 @ControlValueTransformer({
   name: 'emoji-password',
 })
 export class PasswordToEmojiTransformer implements Transformer<string, string> {
-  private readonly emojis = ['🤫', '🤐', '😷', '😑', '😶', '🤭'];
+  currentPassword: string;
+
+  constructor(@Inject(EMOJIS) private readonly emojis: string[]) {}
 
   toTarget(password: string): string {
+    this.currentPassword = password;
     return Array.from(password || '')
       .map((char, index) => this.emojis[index % this.emojis.length])
       .join('');
   }
 
-  toSource(emojiPassword: string, currentSourcePassword: string): string {
-    if (!emojiPassword || !currentSourcePassword) {
+  toSource(emojiPassword: string): string {
+    if (!emojiPassword || !this.currentPassword) {
       return emojiPassword;
     }
 
     const { 0: characters, index } = emojiPassword.match(/[^\u00FF-\uFFFF]+/);
-    return currentSourcePassword.substring(0, index) + characters + currentSourcePassword.substring(index);
+    return this.currentPassword.substring(0, index) + characters + this.currentPassword.substring(index);
   }
 }

src/app/prefix.transformer.ts

@@ -0,0 +1,13 @@
+import { Transformer } from '@ngze/control-value-transformer';
+
+export class PrefixTransformer implements Transformer<string, string> {
+  constructor(private readonly prefix: string) {}
+
+  toTarget(text: string): string {
+    return text ? this.prefix.concat(text) : text;
+  }
+
+  toSource(text: string): string {
+    return text ? text.replace(this.prefix, '') : text;
+  }
+}