如何使用ControlValueAccessor？

Question

我有一个带有反应性表单的自定义组件InputField和SignupComponent。

<ui-input-field formControlName="email" label="email"></ui-input-field>

当我这样做的时候，我得到的是formControlName in ui-input-field，而不是标记input。如何解决这个问题？

我使用ControlValueAccessor，但不明白它是如何工作的(writeValue()方法)

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ui-input-field',
  template: `
  <div class="group">
    <input  required [formControlName] />
    <span class="bar"></span>
    <label>{{label}}</label>
</div>
    `,
  styleUrls: ['input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputFieldComponent),
      multi: true
    }]
})

export class InputFieldComponent implements OnInit, ControlValueAccessor {
  @Input() label: string;
  constructor() { }

  ngOnInit() {
  }    

  writeValue(value) {
    if (!value || typeof value !== 'string') {
      console.log('not value');
      return;
    }
  }    

  onChange: any = () => {
  }
  onTouched: any = () => {
  }

  registerOnChange(fn) {
    this.onChange(fn);
  }
  registerOnTouched(fn) {
    this.onTouched(fn);
  }
}

Answer 1

在您的实现中有许多不正确的地方：

1. 应该使用writeValue(obj: any): void函数来设置组件中输入控件的值。您还没有正确地实现这一点。
2. <input>元素在您的Component中不应该包含formControlName属性。
3. registerOnChange和registerOnTouched提供了一个函数，只要您的<input>更改或被触摸，就应该调用它们。你还没有实现这一点。

文档应该提供更多关于如何进行操作的详细信息。