无法绑定到“x"，因为它不是“输入"Angular 2 的已知属性 [英] Can't bind to 'x' since it isn't a known property of 'input' Angular 2

问题描述

使用 Angular 2，在将常规属性绑定到电话输入时遇到问题.问题如下:

Using Angular 2, having problem to bind regular property to telephone input. The problem is below:

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();
    }
}

我没有任何可能的想法来解决这个问题.加载此页面时出现此问题.

I don't have any possible ideas how to solve this. Have this problem while loading this page.

推荐答案

通过导入 angular2-text-mask 模块并将 MaskedInputDirective 注入到声明中来解决这个问题.

Resolve this by import angular2-text-mask module and inject MaskedInputDirective to declarations.

这篇关于无法绑定到“x"，因为它不是“输入"Angular 2 的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！