在使用ReactiveForms将输入转换为NPM包的包装器组件时,没有ngControl的提供者

时间:2018-01-10 14:51:37

标签: angular angular-directive angular-components angular-forms

对不起,有一个标题。这是我遇到的错误:

MyComponent.html:37 ERROR Error: StaticInjectorError[NgControl]: StaticInjectorError[NgControl]: NullInjectorError: No provider for NgControl! at _NullInjector.get (core.js:993) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223) at StaticInjector.get (core.js:1094) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223) at StaticInjector.get (core.js:1094) at resolveNgModuleDep (core.js:10878) at NgModuleRef_.get (core.js:12110) at resolveDep (core.js:12608)

这是用例:我有一个另一个团队构建的库(我们称之为“第三方库”,提供输入包装器。在我的组件中,我有一个反应形式和模板结构,看起来像这样:

<form *ngIf="form" [formGroup]="form">

<div *ngIf="loggedIn">

    <div *ngIf="!this.errorCode">
        <div class="form-account-num-wrapper" *ngIf="!hasCardInfo">

            <div>
                Enter Card Details
            </div>

            <thirdparty-input class="form-label-hover"
                        minlengtherror="Minimum Credit Card Length is 13-digits."
                        maxlengtherror="Maximum Credit Card Length is 19-digits"
                        requirederror="Card Number is required."
                        label="Card Number"
                        [ngClass]="cardClasses"
                        [formGroup]="form"
                        [icons]="icons"
                        (reset)="resetField('cardNumber')">
                <input id="cardNumber"
                       autocomplete="off"
                       thirdpartyInputDirective
                       formControlName="cardNumber"
                       required="true"
                       minlength="16"
                       type="text"/>
            </thirdparty-input>

        </div>
    </div>
</div>

很抱歉,标记和错误消息并不完全匹配。我修剪了一些标记以专注于错误,这是在处理此行时抛出的:

<input id="cardNumber" autocomplete="off" thirdpartyInputDirective formControlName="cardNumber" required="true" minlength="16" type="text"/>

我觉得我之前见过其他第三方图书馆做过这样的事情,但我不确定他们做了什么不同的事情。我查看了ngTemplateOutlet和ngTemplateOutletContext,但是无法找到很多关于它们的信息。我发现它们让他们看起来似乎不是解决这个问题的方法。

以前有人见过这个问题吗?如果是这样,有没有人有解决它的运气?我相信它与指令有关,但是如果我删除该指令,组件就会开始抛出错误,因为它希望transcluded元素附加thirdPartyInputDirective

0 个答案:

没有答案