由于
所以，我正在创建一个自定义指令，需要在其中使用表单控件。但我得到了一个错误：没有NgControl的提供程序；我知道正确的答案是：导入反应式表单模块，但我已经导入了！
import { Directive, ElementRef, Input, HostListener, OnDestroy } from '@angular/core';
import { NgControl } from '@angular/forms'
@Directive({
selector: '[testDirective]'
})
export class TestDirectiveClass implements OnDestroy{
constructor(private elementRef: ElementRef, c: NgControl ) { }
ngOnDestroy() {
}
}
我的组件：
<p testDirective>
Start editing to see some magic happen :)
</p>
和我的应用程序模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TestDirectiveClass } from './testDirective.directive';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ AppComponent, HelloComponent, TestDirectiveClass ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
我的堆叠式
p元素缺少[formControlName]指令，因此正在引发异常。接下来是使用HTML表单元素，如input, select, radio button, etc.。这是因为Angular为默认表单元素定义了ControlValueAccessor，而p仅用于表示文本，它没有input那样的功能。
app.component.html
<div [formGroup]="form">
<input testDirective formControlName="testControl">
Start editing to see some magic happen :)
</div>
app.component.ts
import { Component, VERSION, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{
name = 'Angular ' + VERSION.major;
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
testControl: [null]
})
}
}
Angular文档还说：
所有基于控件FormControl的指令都扩展的基类。它将FormControl对象绑定到DOM元素
您可以添加Decorator@可选。
用于构造函数参数的参数装饰器，它将参数标记为可选依赖项。如果找不到依赖项，DI框架将提供null
import { Directive, Optional, ElementRef, Input, HostListener, OnDestroy } from '@angular/core';
import { NgControl } from '@angular/forms'
@Directive({
selector: '[testDirective]'
})
export class TestDirectiveClass implements OnDestroy{
constructor(
@Optional() public c: NgControl,
private elementRef: ElementRef ) { }
ngOnDestroy() {
}
}
https://stackblitz.com/edit/angular-ivy-sjr7q7