Question

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

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

我已经执行了以下操作，没有错误，但是预期的输出却没有以正确的风格。我可以看到任何用于输入电话号码的输入文字。

我已经将模块安装并导入了我的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 { }

在我的app.component.ts中创建表单组。

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

  }

}

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

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

1 个答案: