как перечислить международный номер телефона в Angular Material V6? - PullRequest
Новая
       20

как перечислить международный номер телефона в Angular Material V6?

0 голосов
/ 05 июня 2018

Я работаю над приложением, которое использует Angular Material V6.Я хочу перечислить международный номер телефона с флажками в текстовом поле Компонент материала.Я искал в Интернете и обнаружил модуль npm, но он использовал текстовый компонент начальной загрузки.Я добавил скриншот, чтобы посмотреть на него.Bootstrap отличается от компонента текстового поля углового материала.

Теперь это:

enter image description here

Угловой компонент материала:

enter image description here

Пример кода: 

<mat-form-field color="warn" class="form-field-width">
 <int-phone-prefix matInput [locale]="'es'"></int-phone-prefix>
</mat-form-field>

ОШИБКА:

ОШИБКА: поле mat-form-field должно содержать MatFormFieldControl.

Пожалуйста, дайте мне ваше предложение.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

У меня это работает с другой зависимостью, это ng2-tel-input .Пример исходного кода (поверх этого не забудьте следовать «Установке», доступной в репозитории):

contact.component.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.component';
import { CommonModule } from '@angular/common'
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.component.ts 

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.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]);
    }
  }
}
0 голосов
/ 05 июня 2018

проверьте, импортировали ли вы модуль Matinput 

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

]

Вы также можете обратиться по ссылке https://github.com/angular/material2/issues/7898

этот тип ошибки описан в документации, пожалуйста, обратитесь также к

...