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
Спасибо за вашу помощь!