Angular 2. Error in Chrome: Unable to find control with unspecified name attribute

Question

This plunker works in Firefox with any console error, but in Chrome I get the message:

Error in formcontrol

<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> 

Cannot find control with undefined name attribute

Answer 1

Since you have [formControl]="childControl" specified in the MyChild template, you need the FormControl specified in your MyChild class.

 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() {} } 

However, after that you get an error that seems unrelated TypeError: v is not a function

Answer 2

I think you need to use the formControlName property for the input tag, I hope this helps.