【问题标题】:Angular 2 - Error: No provider for FormControlAngular 2 - 错误:没有 FormControl 的提供者
【发布时间】:2017-05-13 04:56:19
【问题描述】:

我为社区编写了一个库,它需要访问表单控件并监听更改的值。

这是我之前使用 Angular 2.3 和 4.0 时的做法。

export class ValidationMessageDirective implements OnInit {

    @Input('validationMessage') customMessage: string;
    constructor(private el: ElementRef, private formControl: NgControl, private validationMessageService: ValidationMessageService) {
        this.target = $(el.nativeElement);
        this.formGroup = this.target.closest('.form-group');

        this.formControl.valueChanges.subscribe((newValue) => {
            this.checkValidation();
        });
    }
}

但升级到 Angular 4.1 后,此代码不再有效。 这是我得到的错误: ERROR Error: Uncaught (in promise): Error: No provider for NgControl!

对我在指令中更改的值有什​​么建议或想法吗?

更新 1: 这是我的index.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ValidationMessageDirective } from './src/ng2-validation-message.directive';
import { ValidationMessageService } from './src/ng2-validation-message.service';

export * from './src/ng2-validation-message.directive';
export * from './src/ng2-validation-message.service';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        ValidationMessageDirective
    ],
    exports: [
        ValidationMessageDirective
    ],
})
export class Ng2ValidationMessage {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: Ng2ValidationMessage,
            providers: [ValidationMessageService]
        };
    }
}

【问题讨论】:

  • 你能发布你的模块引导程序吗?
  • @wannadream 是的。刚刚发布了我的index.ts。请看一看。

标签: angular angular-directive angular-providers angular-validation


【解决方案1】:

当输入不是表单控件时会发生此问题,因为我没有为输入提供name 属性。 与Angular版本问题无关。

【讨论】:

    【解决方案2】:

    你可以试试这个吗?

    import { ..., FormControlDirective, FormGroupDirective } from '@angular/forms';
    
    @NgModule({
        ...
        providers: [FormControlDirective, FormGroupDirective]
    })
    

    【讨论】:

    猜你喜欢
    • 2015-07-26
    • 2019-04-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-03
    • 2018-03-16
    • 1970-01-01
    相关资源
    最近更新 更多