Здравствуйте, уважаемые. Я пытаюсь построить динамические формы в Ангулар2. Но что то у меня не получается, прошу помочь найти ошибку в коде.
Идея в следующем, есть app component (parent), child component(child), в child содержится верстка для элементов типа инпут (радио, чекбокс, текст).
Пытаюсь используя reactiveforms модуль построить динамическую форму https://angular.io/guide/dynamic-form
Чекбокс и текст поля работают верно, а вот с радио какая то непонятная вещь происходит, помогите найти ошибку пожалуйста. Пример кода построения радио инпутов
<div *ngFor="let item of fields">
<label class="center-block">
<input [type]="item.type" [formControlName]="item.name" name="hero" value="{{item.value}}">
{{item.value}}
</label>
</div>
Шаблон родителя
<div [formGroup]="myform">
<h2>Hello {{name}}</h2>
<child [fields]="fields" [myform]="myform"></child>
</div>
Код родителя app.component.ts
myform: FormGroup;
fields=[
{
type: "radio",
value: "flight",
name: "hero"
},
{
type: "radio",
value: "vision",
name: "hero"
},
{
type: "radio",
value: "strenth",
name: "hero"
}
];
constructor(private fb: FormBuilder) {
this.myform = this.fb.group({
name: ['', Validators.required ],
hero: 'flight',
sidekick: ''
});
}
Код потомка child
@Input() fields;
@Input() myform: FormGroup;
constructor() {}
Поля name и sidekick работают правильно, никак не пойму в чем ошибка с радио кнопками. Ссылка на планк http://plnkr.co/edit/AtoKY2hWQkfS9oVXmmYP?p=preview