2016-04-09 4 views
-2

У меня есть вопрос о том, как можно реализовать радиокнопки в моей форме с ngControlКак использовать переключатели с ngControl (AngularJS2)?

Вот код шаблона:

<div class="form-group"> 
    <label class="radio-inline" *ngFor="#size of formModel.sizes"> 
     <input type="radio" ngControl="ourSize" #ourSize="ngForm" value="{{ size }}" > 
     {{ size }} 
    </label> 
</div> 

здесь код модели:

this.formModel = { 
     sizes: ['asd1', 'asd2', 'asd3'] 
} 

У меня такая ошибка: enter image description here

PS Я уже проверил другой ответ Angular2 - Radio Button Binding , но это не помогло мне (

+0

Пожалуйста, создайте Plunker, что позволяет воспроизвести проблему ответ на связанный вопрос содержит пример, который вы можно использовать в качестве шаблона. –

+0

@ GünterZöchbauer, http://plnkr.co/edit/oh4McekaRWSH0XpGv01I?p=preview – weratius

+0

Зачем вам нужны 20+ файлов для демонстрации проблемы с '

ответ

3

Вы должны использовать радио входы таким образом:.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form> 
     <div class="form-group"> 
     <label class="radio-inline" *ngFor="#size of formModel.sizes; #i=index"> 
     <input type="radio" [(ngModel)]="formModel.sizes[i]" #ctrl="ngForm" ngControl="sizeCtrl" name="size"/> 
     {{ size.value }} 
     </label> 
    </div> 
    Test: {{ctrl?.value}} 
    Values: {{formModel | json}} 
    </form> 
` 
}) 
export class AppComponent { 
    constructor() { 
    this.formModel = { 
     sizes: [ 
     new RadioButtonState(true, 'asd1'), 
     new RadioButtonState(false, 'asd2'), 
     new RadioButtonState(false, 'asd3') 
     ] 
    }; 
    } 
} 

Кнопка радио состояния обновляется в соответствии, что выбран Он Безразлично» т, кажется, что элементы управления могут быть использованы на этом уровне ...

Se это plunkr:. https://plnkr.co/edit/kHJyq3N5ZtoNyAPz6Kbc?p=preview

Смежные вопросы