Я не получаю ожидаемых ошибок

Question

Я использую ng2TelInput, это моя HTML-страница:

<form class="example-form" [formGroup]="myForm" #f="ngForm" (ngSubmit)="submit(f)">
   <mat-form-field class="example-full-width">
          <input
            type="text"
            pattern="[0-9]{10}"
            ng2TelInput 
            matInput
            [ng2TelInputOptions]="{initialCountry: 'in'}"
            (ng2TelOutput)="getNumber($event)"
            formControlName="phone"
            [errorStateMatcher]="matcher">
        <mat-error >This is an <strong>invalid</strong> phone number.
        </mat-error>
      </mat-form-field>
</form>
<button mat-button color="warn" (click)="show_customer()" >Show</button>

Когда я меняю флаг, я получаю ошибку мат - это не то, что я хочу.

Я хочу показать ошибку, когда телефонный ввод остается пустым.

Вот мой component.ts:

export class MyErrorStateMatcher2 implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty|| isSubmitted));
  }

}
@Component({
  selector: 'app-customer-add',
  templateUrl: './customer-add.component.html',
  styleUrls: ['./customer-add.component.css']
})
export class CustomerAddComponent{
  myForm: FormGroup;
  matcher = new MyErrorStateMatcher();
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'phone': ['',Validators.required]
    });
  }
  submit(credentials):Customer{
    this.customer=credentials.value;
    this.customer.phone=this.phone_number;
    return this.customer;

  }
}