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