I am working on an application that uses Angular Material V6. I want to list out the international phone number with flags in Material component text box. I searched the Internet and found an npm module but it was using bootstrap text component. I added a screenshot taking a look at it. Bootstrap differs from angular material text box component.

Now it is:

[![enter image description here](https://i.stack.imgur.com/IqCwz.png)](https://i.stack.imgur.com/IqCwz.png) 

Angular material component:

[![enter image description here](https://i.stack.imgur.com/DQaTL.png)](https://i.stack.imgur.com/DQaTL.png)

Sample code:

```
<mat-form-field color="warn" class="form-field-width">
 <int-phone-prefix matInput [locale]="'es'"></int-phone-prefix>
</mat-form-field>

```

ERROR:

> 
> ERROR Error: mat-form-field must contain a MatFormFieldControl.
> 
> 
> 

please give me your suggestion. Thanks in advance.