angular - 父form.controls中的Angular 2+自定义表单组件

Question

我有一个自定义表单组件。我在模板驱动的表单上使用我的组件。如何将我的组件包含到 form.controls 集合中，类似于 form.controls 中的输入字段？我想找到我的组件来决定它是否脏。我的组件正在包装第三个。未实现 ControlValueAccessor 的派对 UI 组件。

const EDITOR_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => OptionChoiceComponent),
  multi: true
};

@Component({
  selector: 'option-choice',
  templateUrl: './option-choice.component.html',
  styleUrls: ['./option-choice.component.scss'],
  providers: [ EDITOR_VALUE_ACCESSOR ]
})

export class OptionChoicer implements OnInit, ControlValueAccessor {

  private hasChoice: boolean;
  onPropagateChange: Function = () => {};
  onModelTouched: Function = () => {};

  constructor() { }

  get value(): boolean {
    this.hasChoice;
  }

  set value(v: boolean) {
    this.hasChoice = v;
  }

  ngOnInit() {
    this.hasChouce = false;
  }

  onChoiced(event) {
    this.onModelTouched(true);
    this.onPropagateChange(true);
  }

  writeValue(value: any): void {
    if (value) {
        this.hasChoice = value;
    }
  }

  registerOnChange(fn: Function): void {
    this.onPropagateChange = fn;
  }

  registerOnTouched(fn: Function): void {
    this.onModelTouched = fn;
  }

  setDisabledState(val: boolean): void {
  }

}

下面调用我的组件 se：

optionIsChoice is boolean

<option-choice id="optionchoice" [(ngModel)]="optionIsChoice"></option-choice>