Angular 如何使用ngx mat intl tel input创建带有国旗的输入

没有正确的输入样式和输入类型是隐藏的，只有当我点击窗口时，我才能看到选择国家的弹出窗口

有人能帮我设计一下这个元素吗

我已经做了以下操作，没有错误，但是预期的输出不是 以正确的方式。我可以看到任何用于输入电话号码的输入文本

我已在我的app.module.ts中安装并导入该模块

      import { BrowserModule } from '@angular/platform-browser';
         import { NgModule } from '@angular/core';
        import { AppComponent } from './app.component';
      import { BrowserAnimationsModule } from '@angular/platform- 
            browser/animations';
     import { NgxMatIntlTelInputModule  } from "ngx-mat-intl-tel-input";
     import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     import { MaterialModule } from "./material/material.module";

            @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            BrowserAnimationsModule,

            FormsModule, ReactiveFormsModule,
            NgxMatIntlTelInputModule ,
            MaterialModule
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }

在my app.component.ts中创建formgroup

import { Component, OnInit } from '@angular/core';
import { FormArray,FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  phoneForm = new FormGroup({
    phone: new FormControl('', Validators.required)

 });


  ngOnInit() {
    // initialization logic goes here

  }

}

在my app.component.html-template中添加以下代码段

    <form #f="ngForm" [formGroup]="phoneForm">
     <div>
      <ngx-mat-intl-tel-input style="border: 2px solid red; padding: 10px;margin-left: 100px;width: 100px; height: 100px;"
        [preferredCountries]="['us', 'gb']"

        [enableAutoCountrySelect]="true"
        [enablePlaceholder]="true"
        name="phone"
        formControlName="phone" #phone></ngx-mat-intl-tel-input>
      <mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>
      <mat-error *ngIf="f.form.controls['phone']?.errors?.required">Required Field</mat-error>
      <mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber">Invalid Number</mat-error>
     </div>
    </form>

e、 g.{{phone.selectedCountry.placeHolder}
必填字段
无效号码

---

考虑到你的html组件中有这个

  <mat-form-field appearance="outline">
                        <ngx-mat-intl-tel-input
                        [preferredCountries]="['us', 'gb']"
                        [enablePlaceholder]="true"
                        [enableSearch]="true" name="phone" #phone>
                      </ngx-mat-intl-tel-input>

将电话输入字段与国家/地区下拉列表对齐

input:not(.country-search){
  bottom: 3px;
  left: 10px;
}

“国家/地区”下拉列表采用整个窗口的高度，因此我将最大高度设置为250px，字体大小设置为0.8rem

 .mat-menu-content:not(:empty){
  max-height:250px;
}


.country-list-button{
  font-size: 0.8rem!important;
}

---

以下是stackblitz项目：

你能在@SushilKumarGupta上分享一个例子吗？我已经用一个例子链接更新了答案。过来看

 .mat-menu-content:not(:empty){
  max-height:250px;
}


.country-list-button{
  font-size: 0.8rem!important;
}