如何使用 ngx-mat-intl-tel-input 创建带有国家标志的输入

Question

输入没有正确的样式，并且输入类型被隐藏，只有当我单击窗口时，我才能看到用于选择国家/地区的弹出窗口。

有人可以帮我设计元素的样式吗？

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

1. 我已在 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 { }
   

2. 在我的 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
   
     }
   
   }
   

3. 在我的 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>
   

Answer 1

考虑到你的 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>

您需要添加 css 以使国家/地区下拉列表可见。最初加载组件时，国家/地区下拉列表的不透明度为 0，因此您需要通过将不透明度添加为 1 来覆盖它！重要。

为了对齐，我添加了 8px 底部定位

.country-selector{
  opacity:1 !important;
  bottom:8px !important;
}

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

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 项目：https ://stackblitz.com/edit/ngx-mat-intl-tel-input-demo