Angular 2. 在Chrome中出现错误: 找不到未指定名称属性的控件

Question

这个 plunker 在Firefox中运行没有控制台错误，但在Chrome中会显示以下信息：

表单控件错误

<ul>
  <li *ngFor="let item of data">
    <label>
      <input type="radio" name="radio1"
        [value]="item.id"
        [formControl]="childControl"
        (input)="fn($event.target.value)" >
      <p>{{ item.title }}</p>
    </label>
  </li>
</ul>

找不到未指定名称属性的控件。

- MikeS

---

代码：plunker - MikeS

我道歉。是我的错误和疏忽。 - MikeS

Answer 1

由于您在MyChild模板中指定了[formControl]="childControl"，因此您需要在MyChild类中指定一个FormControl。

export class MyChild  implements ControlValueAccessor {
  @Input() data: any;
  out: any;
  childControl = new FormControl();

  fn: (value:any) => void;

  validateFn: any = () => {};

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

  writeValue(value: any): void {
    this._renderer.setElementProperty(this._elementRef, 'checked', value == this._elementRef.nativeElement.value);
  }
  registerOnChange(fn: (value: any) => void) {
    this.onChange = fn;
  }
  registerOnTouched() {}

}

然而，之后你会遇到一个看似不相关的错误 TypeError: v 不是函数

- Syed Jafri

Answer 2

我认为你需要在input标签中使用formControlName属性，希望能对你有所帮助。

- Ahmed Alstaty