使用Angular 2,将常规属性绑定到电话输入有问题。问题如下:
Error: Template parse errors:
Can't bind to 'textMask' since it isn't a known property of 'input'. ("lass="form-control" name="phone" id="phone" placeholder="Phone" [(ngModel)]="stepModel.phoneNumber" [ERROR ->][textMask]="{mask: mask}" #phone="ngModel">
<input type="email" class="form-cont"): AdvancedReviewStepEarn@14:139
这里输入:
<input type="tel" class="form-control" name="phone" id="phone" placeholder="Phone" [(ngModel)]="stepModel.phoneNumber" [textMask]="{mask: mask}" #phone="ngModel">
和组件
import { Component, OnInit, OnDestroy, Injector, ViewChild, ElementRef } from '@angular/core'
import { OperationResult, OperationDataResult, HeaderActivity } from '../../helpers/operation.models'
import { ActivatedRoute, Router } from '@angular/router';
import { ToolsService } from '../../services/tools.service'
import { SpinnerService } from '../../services/spinner.service'
import { AdvancedReviewService } from '../../services/advanced.review.service'
import { Step4Model, EarnCashViewModel } from '../../helpers/advanced.review.models'
import { TermsComponent } from '../terms.component'
import { SpinnerComponent } from '../spinner.component'
import { NgOperationValidation } from '../../helpers/operation.validation'
import { HeaderType, AdvancedReviewPage, HeaderTitle, AdvancedReviewParams, parseAdvancedReviewRoute, Page } from '../../helpers/platform.helpers'
@Component({
selector: 'advanced-review-step-earn-component',
templateUrl: '../../templates/advanced-review-templates/advanced.step.earn.component.html'
})
export class AdvancedReviewStepEarn implements OnInit, OnDestroy {
@ViewChild('operationSpinner') operationSpinner: SpinnerComponent;
@ViewChild('termsRef') terms: TermsComponent;
@ViewChild('earnStepForm') earnStepForm;
@ViewChild('operation') operationValidation: NgOperationValidation;
private isSimple: boolean = false;
private stepModel: Step4Model;
private earnModel: EarnCashViewModel;
private stepParams: AdvancedReviewParams;
private isEarnCache: boolean;
private isShowTerms: boolean = false;
public mask: Array<string | RegExp>;
constructor(private toolsService: ToolsService,
private spinner: SpinnerService,
private advancedReviewService: AdvancedReviewService,
private injector: Injector,
private router: Router) {
this.initModels();
this.mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
}
initModels(): void {
this.stepParams = parseAdvancedReviewRoute(this.injector);
if (this.stepParams.isParsed) {
this.earnModel = new EarnCashViewModel();
this.stepModel = new Step4Model();
this.stepModel.reviewId = this.stepParams.reviewId;
this.advancedReviewService.getDataForEarnCache().subscribe(this.onDataForEarnCacheLoaded.bind(this));
} else {
this.router.navigateByUrl(Page.NotFound);
}
}
ngOnInit(): void {
}
ngOnDestroy(): void {
this.spinner.start();
}
}
我没有任何可能的想法如何解决这个问题。加载此页面时遇到此问题。
答案 0 :(得分:1)
通过导入angular2-text-mask
模块解析此问题,并将MaskedInputDirective
注入声明。