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

Now it is:

Angular material ponent:

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.

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

Now it is:

Angular material ponent:

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.

• javascript
• jquery
• angular5
• angular-material2

• check the documentation Error: mat-form-field must contain a MatFormFieldControl This error occurs when you have not added a form field control to your form field. If your form field contains a native <input> or <textarea> element, make sure you've added the matInput directive to it and have imported MatInputModule. Other ponents that can act as a form field control include <mat-select>, <mat-chip-list>, and any custom form field controls you've created – Akhil Aravind Commented Jun 5, 2018 at 5:22
• yeah, Mat form field must contain mat input field. you are right. then how do i list out the international phone numbers? give me your idea please. – Navaneethan Arun Commented Jun 5, 2018 at 5:25
• Could you tell what library do you use for international phone prefix? I'm working in Angular 6. Some advice? – Włodzimierz Woźniak Commented Sep 11, 2018 at 12:46

2 Answers 2

I got it working with different dependency, it's ng2-tel-input. Sample source code (on top of this remember to follow the "Installation" available in the repo):

contact.ponent.html

<mat-form-field appearance="outline">
  <input 
    matInput 
    ng2TelInput 
    [ng2TelInputOptions]="{initialCountry: 'us'}"
    formControlName="formControlPhone" 
    (hasError)="hasError($event)" />
  <mat-error
    *ngIf="
    !contactForm.get('formControlPhone').valid &&
    contactForm.get('formControlPhone').touched
    "
  >This is an <strong>invalid</strong> phone number.
  </mat-error>
</mat-form-field>

contact.module.ts

import { NgModule } from '@angular/core';
import { ContactComponent } from './contact/contact.ponent';
import { CommonModule } from '@angular/mon'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
  MatFormFieldModule,
  MatInputModule
} from '@angular/material';
import {Ng2TelInputModule} from 'ng2-tel-input';

@NgModule({
  declarations: [ContactComponent],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    Ng2TelInputModule
  ],
})
export class ContactModule {}

contact.ponent.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-contact',
  templateUrl: './contact.ponent.html',
  styleUrls: ['./contact.ponent.scss']
})
export class ContactComponent {
  public contactForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.contactForm = this.formBuilder.group({
      formControlPhone: ['', Validators.required]
    });
  }
  hasError(event: any): void {
    if (!event && this.contactForm.value.formControlPhone !== '') {
      this.contactForm.get('formControlPhone').setErrors(['invalid_cell_phone', true]);
    }
  }
}

check if you have imported matinput module

import {MatInputModule} from '@angular/material';
@NgModule({
  imports: [
  ...
    MatInputModule
  ...

]

You can also refer the link https://github./angular/material2/issues/7898

this type of error is described in documentation, please refer that also