Angular 6 шаблонно-управляемая форма и libphonenumber

В настоящее время я работаю над формой, управляемой шаблоном Angular 6, и мне нужно реализовать проверку формата для поля телефона с кодом страны и флагами, как этот проект:

http://hodgepodgers.github.io/ng-intl-tel-input/

Я знаю, что libphonenumber позаботится о форматировании и разборе номера телефона, но

Я не могу найти пример, который использует Angular 6 (или даже 5) шаблонно-управляемую форму. Каждая найденная мною демонстрация использует реактивную форму или это для AngularJS...

Можно ли использовать libphonenumber с этим типом формы, и если это так, как я могу использовать его в моих машинописных и HTML-файлах?

ЭТА:

Я установил "ngx-intl-tel-input" и добавил следующее: import {NgxIntlTelInputModule} из "ngx-intl-tel-input"; import {BsDropdownModule} из 'ngx-bootstrap';

 @NgModule({
    imports:  [NgxIntlTelInputModule, BsDropdownModule.forRoot()]

У меня есть раскрывающаяся область кода, но флаги не отображаются. Кто-нибудь сталкивался с такой же проблемой?

Вот мой код на данный момент:

<ngx-intl-tel-input [(value)]="phone_number" type="tel" maxlength="25" pattern="^[\s0-9]*$" [required]="emailReq ? false : !null"
        [(ngModel)]="phoneReq" name="phone" #phone="ngModel"></ngx-intl-tel-input>

Вот код для реактивной формы, которую я нашел, которая использует libphonenumber:

    <div formGroupName="country_phone" class="row">
     `enter code here`     <mat-form-field class="full-width col-4">
            <mat-select formControlName="country" placeholder="Country">
              <mat-option *ngFor="let country of countries" [value]="country">
                {{ country.name }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="full-width col-8">
            <input matInput placeholder="Phone" type="tel" formControlName="phone" required>
            <mat-hint align="start"><strong>Mobile:</strong> {{ userDetailsForm.value.country_phone.country.sampleMobilePhone }}</mat-hint>
            <mat-hint align="end"><strong>Fixed:</strong> {{ userDetailsForm.value.country_phone.country.sampleFixedPhone }}</mat-hint>
            <mat-error *ngFor="let validation of validation_messages.phone">
              <mat-error class="error-message" class="error-message" 
 *ngIf="userDetailsForm.get('country_phone').get('phone').hasError(validation.type) && (userDetailsForm.get('country_phone').get('phone').dirty || userDetailsForm.get('country_phone').get('phone').touched)">
                {{ validation.message }}
              </mat-error>
            </mat-error>
          </mat-form-field>
        </div>

Полный код: https://github.com/AngularTemplates/angular-forms-and-validations

Спасибо за вашу помощь!

0 ответов

Другие вопросы по тегам