Merge pull request #7 from juanjotorres90/develop

Add 'fieldControlName' option to get the form control from the parent form group by name
juanjotorres90 · Jun 8, 2024 · 857c363 · 857c363
2 parents 4b37ef4 + 77bdefb
commit 857c363
Show file tree

Hide file tree

Showing 15 changed files with 1,120 additions and 960 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,5 @@ testem.log
 Thumbs.db
 
 .nx/cache
+.nx/workspace-data
 .angular
diff --git a/.prettierignore b/.prettierignore
@@ -10,3 +10,5 @@ yarn.lock
 dist
 
 /.nx/cache
+
+/.nx/workspace-data
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [18.0.1] - 2024-06-08
+
+### Added
+
+- Add 'fieldControlName' option to get the form control from the parent form group by name.
+- Ability to dynamically change the form field value.
+- Ability to dynamically enable or disable the form field.
+
+### Fixed
+
+- Fix "AbstractControl" not assignable to FieldControl.
+- Fix setting the initial value and status of the phone field control when it was set in the parent form group control.
+
 ## [18.0.0] - 2024-05-26
 
 ### Added

diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber
 
 | ngx-material-intl-tel-input | Angular   |
 | --------------------------- | --------- |
-| 18.0.0                      | >= 18.0.0 |
+| 18.0.0 - 18.0.1             | >= 18.0.0 |
 | 0.0.1 - 17.3.0              | >= 17.2.0 |
 
 ## Installation
@@ -54,6 +54,7 @@ imports: [NgxMaterialIntlTelInputComponent];
 | Options             | Type                       | Default                                                                                                                                                                                                                                                                                                      | Description                                                     |
 | ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
 | fieldControl        | `FormControl`              | `FormControl('')`                                                                                                                                                                                                                                                                                            | Form control required to retrieve the value.                    |
+| fieldControlName    | `string`                   | `''`                                                                                                                                                                                                                                                                                                         | Form control name to assign the control from a FormGroup.       |
 | required            | `boolean`                  | `false`                                                                                                                                                                                                                                                                                                      | Telephone field input required.                                 |
 | disabled            | `boolean`                  | `false`                                                                                                                                                                                                                                                                                                      | Telephone field input disabled.                                 |
 | autoIpLookup        | `boolean`                  | `true`                                                                                                                                                                                                                                                                                                       | Sets initial country code based on user's ip.                   |
@@ -100,6 +101,12 @@ Node 20.13.1 is required.
 npm install
 ```
 
+- Using pnpm:
+
+```bash
+pnpm install
+```
+
 - Using bun:
 
 ```bash

diff --git a/apps/ngx-material-intl-tel-input/src/app/app.component.html b/apps/ngx-material-intl-tel-input/src/app/app.component.html
@@ -1,10 +1,24 @@
-<ngx-material-intl-tel-input
-  (currentValue)="getValue($event)"
-></ngx-material-intl-tel-input>
-
-@if (currentPhoneValue()) {
-  <div>Returned value: {{ currentPhoneValue() }}</div>
-} @else {
-  <div>No value returned</div>
-}
-<router-outlet></router-outlet>
+<section>
+  <form [formGroup]="formTestGroup" (ngSubmit)="onSubmit()">
+    <ngx-material-intl-tel-input
+      (currentValue)="getValue($event)"
+      fieldControlName="phone"
+    ></ngx-material-intl-tel-input>
+    <button mat-flat-button type="submit" [disabled]="!formTestGroup.valid">
+      Submit
+    </button>
+  </form>
+  @if (currentPhoneValue()) {
+    <div>
+      Returned value: <br /><mat-chip>{{ currentPhoneValue() }}</mat-chip>
+    </div>
+  } @else {
+    <div>No value returned</div>
+  }
+  @if (submittedPhoneValue()) {
+    <div>
+      Submitted value: <br /><mat-chip>{{ submittedPhoneValue() }}</mat-chip>
+    </div>
+  }
+  <router-outlet></router-outlet>
+</section>
diff --git a/apps/ngx-material-intl-tel-input/src/app/app.component.scss b/apps/ngx-material-intl-tel-input/src/app/app.component.scss
@@ -1,17 +1,35 @@
 :host {
   display: flex;
   flex-direction: column;
-  gap: 32px;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  ngx-material-intl-tel-input,
-  div {
-    max-width: 400px;
-    padding: 16px;
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    justify-content: center;
+    align-items: center;
+    form {
+      button {
+        display: block;
+        margin: 0 auto;
+      }
+    }
+    ngx-material-intl-tel-input,
+    div {
+      max-width: 400px;
+      padding: 16px;
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+    }
+    & > div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+    }
   }
 }
diff --git a/apps/ngx-material-intl-tel-input/src/app/app.component.ts b/apps/ngx-material-intl-tel-input/src/app/app.component.ts
@@ -1,10 +1,24 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
 import { RouterModule } from '@angular/router';
 import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';
 
 @Component({
   standalone: true,
-  imports: [NgxMaterialIntlTelInputComponent, RouterModule],
+  imports: [
+    NgxMaterialIntlTelInputComponent,
+    RouterModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatChipsModule
+  ],
   selector: 'ngx-material-intl-tel-input-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -13,8 +27,28 @@ import { NgxMaterialIntlTelInputComponent } from 'ngx-material-intl-tel-input';
 export class AppComponent {
   title = 'ngx-material-intl-tel-input';
   currentPhoneValue = signal<string>('');
+  submittedPhoneValue = signal<string>('');
+  formTestGroup: FormGroup;
 
+  constructor(private fb: FormBuilder) {
+    this.formTestGroup = this.fb.group({
+      phone: ['', [Validators.required]]
+    });
+  }
+
+  /**
+   * Sets the current phone value to the provided value.
+   *
+   * @param value - The new value for the current phone.
+   */
   getValue(value: string): void {
     this.currentPhoneValue.set(value);
   }
+
+  /**
+   * Submits the form data by setting the submitted phone value to the current phone value from the form group.
+   */
+  onSubmit(): void {
+    this.submittedPhoneValue.set(this.formTestGroup.value['phone']);
+  }
 }
diff --git a/libs/ngx-material-intl-tel-input-lib/README.md b/libs/ngx-material-intl-tel-input-lib/README.md
@@ -20,7 +20,7 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber
 
 | ngx-material-intl-tel-input | Angular   |
 | --------------------------- | --------- |
-| 18.0.0                      | >= 18.0.0 |
+| 18.0.0 - 18.0.1             | >= 18.0.0 |
 | 0.0.1 - 17.3.0              | >= 17.2.0 |
 
 ## Installation
@@ -54,6 +54,7 @@ imports: [NgxMaterialIntlTelInputComponent];
 | Options             | Type                       | Default                                                                                                                                                                                                                                                                                                      | Description                                                     |
 | ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
 | fieldControl        | `FormControl`              | `FormControl('')`                                                                                                                                                                                                                                                                                            | Form control required to retrieve the value.                    |
+| fieldControlName    | `string`                   | `''`                                                                                                                                                                                                                                                                                                         | Form control name to assign the control from a FormGroup.       |
 | required            | `boolean`                  | `false`                                                                                                                                                                                                                                                                                                      | Telephone field input required.                                 |
 | disabled            | `boolean`                  | `false`                                                                                                                                                                                                                                                                                                      | Telephone field input disabled.                                 |
 | autoIpLookup        | `boolean`                  | `true`                                                                                                                                                                                                                                                                                                       | Sets initial country code based on user's ip.                   |

diff --git a/libs/ngx-material-intl-tel-input-lib/package.json b/libs/ngx-material-intl-tel-input-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-material-intl-tel-input",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "license": "MIT",
 	"repository": {
 		"type": "git",

diff --git a/...ib/src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.html b/...ib/src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.html
@@ -95,8 +95,8 @@
       />
 
       <mat-icon matSuffix>
-        @if (iconMakeCall() && fieldControl().valid && fieldControl().value) {
-          <a href="tel:{{ fieldControl().value }}">
+        @if (iconMakeCall() && fieldControl()?.valid && fieldControl()?.value) {
+          <a href="tel:{{ fieldControl()?.value }}">
             <ng-container *ngTemplateOutlet="phoneIcon"> </ng-container>
           </a>
         } @else {
@@ -130,14 +130,14 @@
     <mat-hint>{{ textLabels().hintLabel }}</mat-hint>
   }
   @if (
-    fieldControl().hasError('required') &&
+    fieldControl()?.hasError('required') &&
     textLabels().requiredError &&
-    fieldControl().dirty
+    fieldControl()?.dirty
   ) {
     <mat-error>{{ textLabels().requiredError }}</mat-error>
   }
   @if (
-    fieldControl().hasError('invalidNumber') && textLabels().invalidNumberError
+    fieldControl()?.hasError('invalidNumber') && textLabels().invalidNumberError
   ) {
     <mat-error>{{ textLabels().invalidNumberError }}</mat-error>
   }

diff --git a/...src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.spec.ts b/...src/lib/ngx-material-intl-tel-input-lib/ngx-material-intl-tel-input-lib.component.spec.ts
@@ -4,6 +4,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber';
 import { Country } from '../types/country.model';
 import { provideHttpClient } from '@angular/common/http';
+import { ControlContainer } from '@angular/forms';
 
 describe('NgxMaterialIntlTelInputComponent', () => {
   let component: NgxMaterialIntlTelInputComponent;
@@ -12,7 +13,7 @@ describe('NgxMaterialIntlTelInputComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [NgxMaterialIntlTelInputComponent, NoopAnimationsModule],
-      providers: [provideHttpClient()]
+      providers: [provideHttpClient(), ControlContainer]
     }).compileComponents();
 
     fixture = TestBed.createComponent(NgxMaterialIntlTelInputComponent);
@@ -28,7 +29,7 @@ describe('NgxMaterialIntlTelInputComponent', () => {
     component.ngOnInit();
     expect(component.prefixCtrl.value).toBeNull();
     expect(component.prefixFilterCtrl.value).toBe('');
-    expect(component.fieldControl().value).toBe('');
+    expect(component.fieldControl()?.value).toBe('');
     expect(component.required()).toBe(false);
     expect(component.disabled()).toBe(false);
     expect(component.enablePlaceholder()).toBe(true);
@@ -61,7 +62,7 @@ describe('NgxMaterialIntlTelInputComponent', () => {
     component.ngOnInit();
     const phoneNumber = '678906543';
     component.telForm.get('numberControl')?.setValue(phoneNumber);
-    expect(component.fieldControl().value).toBe(phoneNumber);
+    expect(component.fieldControl()?.value).toBe(phoneNumber);
   });
 
   it('should set fieldControl value to the entered phone number when is valid', () => {
@@ -74,7 +75,7 @@ describe('NgxMaterialIntlTelInputComponent', () => {
       PhoneNumberFormat.INTERNATIONAL
     );
     component.telForm.get('numberControl')?.setValue(phoneNumber);
-    expect(component.fieldControl().value).toBe(formatted);
+    expect(component.fieldControl()?.value).toBe(formatted);
   });
 
   it('should select a country from the dropdown', () => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,5 @@ yarn.lock
		dist

		/.nx/cache

		/.nx/workspace-data