为什么在我的ControlValueAccessor实现中Angular调用registerOnChange？

Question

我正在尝试在Angular 4中的模板驱动器表单中实现自定义表单控件组件.因为我希望它与父表单很好地集成,我试图将其实现为ControlValueAccessor.我遵循了我能找到的指南,但Angular没有合作.根据文档,它应该调用我的实现registerOnChange(),但它没有.这是为什么？

/* editor-clause.component.ts */
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { QueryClause } from '../../../../models/query-clause';
import { Input, Component, EventEmitter, Output } from '@angular/core';

@Component({
  moduleId: module.id,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: EditorClauseComponent,
    multi: true,
  }],
  selector: 'editor-clause',
  templateUrl: './editor-clause.component.html',
  styleUrls: ['./editor-clause.component.css']
})
export class EditorClauseComponent implements ControlValueAccessor {
  @Input('clause') clause: QueryClause;
  parentOnChange: any;

  writeValue(_obj: any): void {
    return;
  }

  registerOnChange(fn: any): void {
    // This never gets printed and I don't know why
    console.log('Registering parent change tracking');
    this.parentOnChange = () => {
      console.log('Saw a change. Invoking parent function');
      fn();
    };
  }

  registerOnTouched(_fn: any): void {
    return;
  }

}

包含父表单看起来像:

<form #queryBuilderForm="ngForm">

    <p>Form instructions here</p>

    <editor-clause *ngFor="let clause of clauses" [clause]="clause"></editor-clause>

    <button (click)="addClause()" id="add-query-clause-button">Add clause</button>
</form>

Answer 1

正如文章中所解释的那样,当在Angular表单中实现ControlValueAccessor时,再也不会混淆,它ControlValueAccessor是本机控件和Angular的表单控件之间的中介:

可以通过应用这样的NgModel指令自动创建Angular表单控件:

<editor-clause ngModel *ngFor="let clause of clauses" [clause]="clause"></editor-clause>

或者在组件中手动,然后使用formControl指令绑定到控件:

export class EditorClauseComponent ... {
    myControl = new FormControl();

模板:

<editor-clause formControl="myControl" *ngFor="let clause of clauses" [clause]="clause"></editor-clause>