你可以在这里找到演示stackblitz链接

对于任何自定义组件，如果您需要使用 [（ngModel）]，那么您需要使用自定义 ControlValueAccessor 基类。

创建一个名为 AbstractValueAccessor 的类...

import { forwardRef } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
const noop = () => {};
export abstract cl AbstractValueAccessor implements ControlValueAccessor {
  //The internal data model
  private innerValue: any = "";
  //Placelders for the callbacks which are later provided
  //by the Control Value Accessor
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;
  //get accessor
  get value(): any {
    return this.innerValue;
  }
  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }
  //Set touched on blur
  onBlur() {
    this.onTouchedCallback();
  }
  //From ControlValueAccessor intece
  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }
  //From ControlValueAccessor intece
  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }
  //From ControlValueAccessor intece
  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
}
export function MakeProvider(type: any) {
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => type),
    multi: true,
  };
}

现在，您需要在自定义组件中使用上述类。

自定义组件

import { Component, OnInit } from "@angular/core";
import {
  AbstractValueAccessor,
  MakeProvider,
} from "../app/abstract-value-accessor";
@Component({
  selector: "app-custom-input",
  templateUrl: "./custom-input.component.html",
  styleUrls: ["./custom-input.component.css"],
  providers: [MakeProvider(CustomInputComponent)],
})
export cl CustomInputComponent
  extends AbstractValueAccessor
  implements OnInit
{
  ngOnInit() {}
}

上面，providers:[MakeProvider (CustomInputComponent)] 这一行我们为我们的组件提供我们的自定义值访问器。现在，我们准备使用这个组件。

app-component.html

<app-custom-input [(ngModel)]="customValue"></app-custom-input>

app-component.ts

customValue = 'custom-value';

Angular 提供ControlValueAccessor来控制自定义组件。

ControlValueAccessor 接口提供了利用 Angular Forms API 并在它和 DOM 元素之间创建连接的能力。

下面是实现此概念的示例：