feat(input): maxLength of 15

rbalet · Jul 17, 2024 · 79b4657 · 79b4657
1 parent 821ae73
commit 79b4657
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ If you want to show the sample number for the country selected or errors , use m
 | enableSearch       | `boolean`  | `false`      | Whether to display a search bar to help filter down the list of countries           |
 | format             | `string`   | `default`    | Format of "as you type" input. Possible values: national, international, default    |
 | inputPlaceholder   | `string`   | `undefined`  | Placeholder for the input component.                                                |
+| maxLength          | `number`   | `15`         | max length of the input.                                                            |
 | onlyCountries      | `string[]` | `[]`         | List of manually selected country abbreviations, which will appear in the dropdown. |
 | preferredCountries | `string[]` | `[]`         | List of country abbreviations, which will appear at the top.                        |
 | resetOnChange      | `boolean`  | `false`      | Reset input on country change                                                       |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.1.2",
+  "version": "18.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/projects/ngx-mat-input-tel-tester/src/app/app.component.ts b/projects/ngx-mat-input-tel-tester/src/app/app.component.ts
@@ -44,7 +44,7 @@ export class AppComponent implements AfterViewInit {
   @ViewChild(NgxMatInputTelComponent) phoneInput: NgxMatInputTelComponent | undefined
 
   phoneForm = new FormGroup<PhoneForm>({
-    phone: new FormControl(null, [Validators.required]),
+    phone: new FormControl(null, [Validators.required, Validators.maxLength(9)]),
   })
 
   profileForm = new FormGroup<ProfileForm>({
@@ -65,5 +65,9 @@ export class AppComponent implements AfterViewInit {
     if (this.phoneInput && this.phoneInput.matMenu) {
       this.phoneInput.matMenu.panelClass = 'custom-panel'
     }
+
+    this.phoneForm.valueChanges.subscribe((value) => {
+      console.log('phoneForm.valueChanges', value)
+    })
   }
 }
diff --git a/projects/ngx-mat-input-tel/README.md b/projects/ngx-mat-input-tel/README.md
@@ -103,6 +103,7 @@ If you want to show the sample number for the country selected or errors , use m
 | enableSearch       | `boolean`  | `false`      | Whether to display a search bar to help filter down the list of countries           |
 | format             | `string`   | `default`    | Format of "as you type" input. Possible values: national, international, default    |
 | inputPlaceholder   | `string`   | `undefined`  | Placeholder for the input component.                                                |
+| maxLength          | `number`   | `15`         | max length of the input.                                                            |
 | onlyCountries      | `string[]` | `[]`         | List of manually selected country abbreviations, which will appear in the dropdown. |
 | preferredCountries | `string[]` | `[]`         | List of country abbreviations, which will appear at the top.                        |
 | resetOnChange      | `boolean`  | `false`      | Reset input on country change                                                       |

diff --git a/projects/ngx-mat-input-tel/package.json b/projects/ngx-mat-input-tel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-input-tel",
-  "version": "18.1.2",
+  "version": "18.2.0",
   "author": {
     "name": "Raphaël Balet",
     "email": "[email protected]"

diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
@@ -102,5 +102,6 @@
     [placeholder]="inputPlaceholder"
     [disabled]="disabled"
     #focusable
+    [maxlength]="maxLength"
   />
 </div>
diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts
@@ -117,15 +117,16 @@ export class NgxMatInputTelComponent
 
   @Input() autocomplete: 'off' | 'tel' = 'off'
   @Input() cssClass?: string
-  @Input({ transform: booleanAttribute }) enablePlaceholder = true
-  @Input({ transform: booleanAttribute }) enableSearch = false
   @Input() errorStateMatcher: ErrorStateMatcher = this._defaultErrorStateMatcher
   @Input() inputPlaceholder: string = ''
+  @Input() maxLength: string | number = 15
   @Input() name?: string
   @Input() onlyCountries: string[] = []
   @Input() preferredCountries: string[] = []
-  @Input({ transform: booleanAttribute }) resetOnChange = false
   @Input() searchPlaceholder = 'Search ...'
+  @Input({ transform: booleanAttribute }) enablePlaceholder = true
+  @Input({ transform: booleanAttribute }) enableSearch = false
+  @Input({ transform: booleanAttribute }) resetOnChange = false
   @Input()
   set format(value: PhoneNumberFormat) {
     this._format = value