在Angular 2+中扩展FormControlDirective；

我正在研究这个问题，试图找出如何扩展FormControlDirective:

答案是有的，但我不确定这是什么意思：

formControl

\

formControlName

选择器出现在另一个窗口中 地点-。 为了使指令起作用，您应该实现所有默认值

hybridFormControl

指令的访问器（遵循 内置指令的模式）

这是我的密码：

导出常量formControlBinding:any={
提供：NGC控制，
useExisting:forwardRef（（）=>ControlDirective）
};
@指示({
选择器：“[appControl]”，
提供程序：[formControlBinding]，
exportAs:'ngForm'
})
导出类ControlDirective扩展FormControlDirective实现OnInit{
建造师(
@可选（）@Self（）@Inject（NG_验证器）验证器：数组，
@可选（）asyncValidators:Array来自他的问题。
set-appControl
确实运行，即使我正在传递一个值，如
和
FormControlDirective。rawValidators
似乎总是一个空数组，即使
FormGroup
与标准
FormControlDirective
一起工作

我该如何“实现所有默认值访问器”？
如果其他人遇到类似情况，我提出了一个解决方案。我想从子表单控件元素动态创建一个表单控件模型。这样，我就不必在编写初始模型时使用大量表单控件字段这是如何扩展FormControlName类的：

@Directive({
  selector: '[hybridFormControl]'
})
class HybridFormControl Directive extends FormControlName implements ControlValueAccessor, OnChanges {
  @Input('hybridFormControl') name: string;

  onChange;
  onTouched;

  constructor(
      @Optional() protected formGroupDirective: FormGroupDirective,
      @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
      private fb: FormBuilder,
      private renderer: Renderer2,
      private element: ElementRef
  ) {
    super(formGroupDirective, [], [], valueAccessors, null);
    this.valueAccessor = this;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (!this._registered) {
      // dynamically create the form control model on the form group model.
      this.formGroup = this.formGroupDirective.form;
      this.formGroup.registerControl(name, this.fb.control(''));
      this._registered = true;
    }

    // IMPORTANT - this ties your extended form control to the form control 
    // model on the form group model that we just created above. Take a look
    // at Angular github source code.
    super.ngOnChanges(changes); 
  }

  @HostListener('input', ['$event.target.value'])
  @HostListener('change', ['$event.target.value'])
  onInput(value): void {
    this.onChange(modelValue);
  }

  writeValue(value): void {
    const element = this.element.nativeElement;
    this.renderer.setProperty(element, 'value', value);
  }

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

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

您可以使用这种新的混合指令，如：

@Component({
  selector: 'app',
  template: `
    <form formGroup=[formGroup]>
      <input type="text" hybridFormControl="myName">
    </form>
  `
class AppComponent {
  formGroup: FormGroup

  constructor(fb: FormBuilder) {
    this.form = this.fb.group({});
  }
}

@组件({
选择器：“应用程序”，
模板：`
`
类AppComponent{
formGroup:formGroup
构造函数（fb:FormBuilder）{
this.form=this.fb.group（{}）；
}
}

如果您想通过验证程序，您需要修改
this.formGroup.registerControl（name，this.fb.control（“”））；
代码行。我还没有验证过这一点，但希望这能帮助遇到此问题的其他人

资料来源：