该错误表示，将放在formControl上时Angular不知道该怎么办div。要解决此问题，您有两个选择。
- 您可以将放在
formControlNameAngular支持的元素上。这些都是：input，textarea和select。
- 您实施
ControlValueAccessor接口。这样，您将告诉Angular“如何访问控件的值”（因此命名）。或简单来说：做什么，当您formControlName在一个元素上放置一个元素时，它自然没有与之关联的值。
现在，实现ControlValueAccessor接口一开始可能有些艰巨。尤其是因为那里没有足够的相关文档，因此您需要在代码中添加很多样板。因此，让我尝试通过一些简单易懂的步骤将其分解。
将表单控件移到其自己的组件中
为了实施 ControlValueAccessor，您需要创建一个新的组件（或指令）。将与表单控件相关的代码移到此处。这样，它也将易于重用。首先，可能是在组件内部拥有控件的原因，这就是为什么需要实现ControlValueAccessor接口的原因，因为否则，您将无法将自定义组件与Angular表单一起使用。
将样板添加到您的代码中
ControlValueAccessor接口的实现非常冗长，这是它附带的样板：
import {Component, OnInit, forwardRef} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.scss'],
// a) copy paste this providers property (adjust the component name in the forward ref)
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
// b) Add "implements ControlValueAccessor"
export class CustomInputComponent implements ControlValueAccessor {
// c) copy paste this code
onChange: any = () => {}
onTouch: any = () => {}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
// d) copy paste this code
writeValue(input: string) {
// TODO
}
那么各个部分在做什么呢？
- a）在运行时告知Angular您已实现
ControlValueAccessor接口
- b）确保您正在实施
ControlValueAccessor接口
- c）这可能是最令人困惑的部分。基本上，您要做的就是为Angular提供重写类属性/方法的方法
onChange，onTouch并在运行时使用其自己的实现，这样您就可以调用这些函数了。因此，了解这一点很重要：您不需要自己实现onChange和onTouch（最初的空实现除外）。您对（c）所做的唯一一件事就是让Angular将其自身的函数附加到您的类上。为什么？因此，您可以在适当的时候调用 Angular提供的onChange和onTouch方法。我们将在下面查看其工作原理。
- d）
writeValue当我们实现该方法时，我们还将在下一部分中看到该方法的工作方式。我已经将其放在此处，因此所有必需的属性ControlValueAccessor都已实现，并且您的代码仍然可以编译。
实现writeValue
是什么writeValue呢，就是做你的自定义组件里面的东西，当窗体控件在外面改变。因此，例如，如果您已经命名了自定义表单控件组件，app-custom-input并且您将在父组件中使用它，如下所示：
<form [formGroup]="form">
<app-custom-input formControlName="myFormControl"></app-custom-input>
</form>
然后writeValue在父组件以某种方式更改的值时触发myFormControl。例如，这可以在表单（this.form = this.formBuilder.group({myFormControl: ""});）初始化期间或在表单重置时进行this.form.reset();。
如果表单控件的值在外部发生更改，通常要执行的操作是将其写入表示表单控件值的局部变量。例如，如果您CustomInputComponent围绕基于文本的表单控件，它可能看起来像这样：
writeValue(input: string) {
this.input = input;
}
并在的html中CustomInputComponent：
<input type="text"
[ngModel]="input">
您还可以按照Angular文档中的描述将其直接写入输入元素。
现在，您已经处理了当外部发生更改时组件内部发生的情况。现在让我们看看另一个方向。当组件内部发生变化时，如何通知外界？
调用onChange
下一步是通知父组件有关您内部的更改CustomInputComponent。这就是上面（c）中的onChange和onTouch功能起作用的地方。通过调用这些函数，您可以将组件内部的更改告知外部。为了将值的更改传播到外部，您需要使用新值作为参数调用onChange。例如，如果用户input在自定义组件的字段中键入内容，则onChange使用更新后的值进行调用：
<input type="text"
[ngModel]="input"
(ngModelChange)="onChange($event)">
如果再次从上方检查实现（c），您将看到发生了什么：Angular将其自己的实现绑定到onChangeclass属性。该实现期望一个参数，即更新后的控制值。您现在正在做的是调用该方法，从而使Angular知道更改。Angular现在将继续进行，并在外部更改表单值。这是所有这一切的关键部分。您通过调用告诉Angular何时应该更新表单控件以及使用什么值onChange。您已为它提供了“访问控制值”的方法。
顺便说一句：名字onChange是我选择的。您可以在这里选择任何东西，例如propagateChange类似的东西。无论您如何命名，它都将是带有一个参数的相同函数，该参数由Angular提供，并由registerOnChange在运行时方法。
呼叫onTouch
由于可以“触摸”表单控件，因此您还应为Angular提供了解何时触摸自定义表单控件的方法。您猜对了，可以通过调用该onTouch函数来实现。因此，对于此处的示例，如果您想与Angular对开箱即用的表单控件的操作方式保持一致，则应onTouch在输入字段模糊时调用：
<input type="text"
[(ngModel)]="input"
(ngModelChange)="onChange($event)"
(blur)="onTouch()">
同样，onTouch是我选择的一个名称，但是它的实际功能由Angular提供，它接受零个参数。这是有道理的，因为您只是让Angular知道了表单控件已被触摸。
放在一起
那么，当它们组合在一起时，它看起来如何？它看起来应该像这样：
// custom-input.component.ts
import {Component, OnInit, forwardRef} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.scss'],
// Step 1: copy paste this providers property
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
// Step 2: Add "implements ControlValueAccessor"
export class CustomInputComponent implements ControlValueAccessor {
// Step 3: Copy paste this stuff here
onChange: any = () => {}
onTouch: any = () => {}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
// Step 4: Define what should happen in this component, if something changes outside
input: string;
writeValue(input: string) {
this.input = input;
}
// Step 5: Handle what should happen on the outside, if something changes on the inside
// in this simple case, we've handled all of that in the .html
// a) we've bound to the local variable with ngModel
// b) we emit to the ouside by calling onChange on ngModelChange
}
// custom-input.component.html
<input type="text"
[(ngModel)]="input"
(ngModelChange)="onChange($event)"
(blur)="onTouch()">
// parent.component.html
<app-custom-input [formControl]="inputTwo"></app-custom-input>
// OR
<form [formGroup]="form" >
<app-custom-input formControlName="myFormControl"></app-custom-input>
</form>
更多例子
嵌套表格
请注意，“控制值访问器”不是嵌套表单组的正确工具。对于嵌套表单组，您可以简单地使用@Input() subform代替。控制值访问器的意思是包装controls，而不是包装groups！请参见以下示例，如何将输入用于嵌套表单： https //stackblitz.com/edit/angular-nested-forms-input-2
资料来源