How can I implement ngx-intl-tel-input with mat-autocomplete?

1.3k Views Asked by At

I use Angular CLI 10.0.4 and I want to do an autocomplete as a search engine where I get the data of an object.

I know it would be pretty easy and I even got it to work with a mat-chip list and it works pretty well. But now I would like to implement the same thing, but using an ngx-intl-tel input (https://www.npmjs.com/package/ngx-intl-tel-input)

I want to do the search with mat-autocomplete and send the result to the input of ngx-intl-tel-input.

I'm going to leave the code first of how I made it work with the mat-chip-list

.HTML

<mat-form-field class="mt-12" appearance="outline">
  <mat-label>To:</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let phone of FC_to?.value" [selectable]="selectable" [removable]="removable" (removed)="remove(email)">
      {{phone}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="Add email..." [formControl]="phoneControl" [matChipInputFor]="chipList" [matAutocomplete]="auto" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let contact of filteredContacts | async" [value]="contact.phone[0]">
      {{contacto?.phone[0]}} {{contacto?.fullName ? '('+ contacto?.nombre_completo +')' : ''}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

.TS

 contact: AddContact[] = [];
  filteredContactos: Observable<AddContact[]>;
  phoneControl: FormControl = new FormControl();

get FC_to() {
    return this.sendSMSForm?.controls?.para as FormControl;
  }

initForm() {
    let ids: string[] | string;
    if (this.data?.multiple) {
      ids = this.data?.solicitudes?.map((s) => s._id);
    } else {
      ids = this.data?.solicitud?._id;
    }
    this.sendSMSForm = this.fb.group({
      to: [[], Validators.required],
    });
  }

  this.filteredContactos = this.phoneControl.valueChanges.pipe(
      startWith(null),
      map((search: string | null) => (search ? this._filterContactos(search) : this.contactos.slice())),
    );

 add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || '').trim()) {
      if (this.sharedService.isPhone(value.trim())) {
        this.addNewPhone(value.trim());
      }
    }

    if (input) {
      input.value = '';
    }
  }

  remove(phone: string): void {
    let value: string[] = this.FC_to.value;
    const index = value.indexOf(phone);

    if (index >= 0) {
      value.splice(index, 1);
      this.FC_to.setValue(value);
    }
  }

  addNewPhone(phone: string) {
    let value: string[] = this.FC_to.value;
    value.push(phone);
    this.FC_to.setValue(value);
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.addNewPhone(event.option.value);
  }

But instead of the mat-chip-list I want to change it to something like this

<ngx-intl-tel-input class="flex-grow-1 " cssClass="form-control phoneInput" [preferredCountries]="preferredCountries " [enableAutoCountrySelect]="false " [enablePlaceholder]="true " [searchCountryFlag]="true
                                        " [searchCountryField]="searchCountryField " searchCountryPlaceholder="Buscar País" [selectFirstCountry]="false " [selectedCountryISO]="initialCountry " [separateDialCode]="true " [phoneValidation]="true " inputId="phoneInput"
  name="phone" [formControl]="phoneControl" [formControlName]="i" (change)="getValues()" required>
  <input matInput type="text " class="ng-dirty ng-invalid " required/>
</ngx-intl-tel-input>
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let contacto of filteredContactos | async" [value]="contacto.telefonos[0]">
    {{contacto?.telefonos[0]}} {{contacto?.nombre_completo ? '('+ contacto?.nombre_completo +')' : ''}}
  </mat-option>
</mat-autocomplete>

Is it possible to do this? How do you recommend I do it? Currently trying to get it to work but nothing. Please if someone help me I don't know how to test...

And it is that I do it this way because I need to mask the numbers with the country codes to the telephone numbers that I receive from the server, so I use intl-tel-input to support me. But now I need to make a finder within it.

Thanks

0

There are 0 best solutions below