Question

我目前正在处理Angular 6模板驱动的表单，并且需要使用该项目的国家/地区代码和标志来实现对电话字段的格式验证：

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

我知道libphonenumber负责电话号码的格式和解析，但是

我似乎找不到使用Angular 6（甚至5）模板驱动形式的示例。我发现的每个演示都使用反应形式或用于AngularJS ...

是否可以以这种形式使用libphonenumber？如果可以的话，如何在我的打字稿和html文件中使用它？

ETA：

我已经安装了“ ngx-intl-tel-input”并添加了以下内容：从'ngx-intl-tel-input'导入{NgxIntlTelInputModule}; 从'ngx-bootstrap'导入{BsDropdownModule};

 @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

感谢您的帮助！

Angular 6模板驱动的表格和libphonenumber

0 个答案: