2016-04-09 7 views
-2

私はここでngControlngControl(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

'

答えて

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') 
     ] 
    }; 
    } 
} 

をそれはdoesnのトンこのplunkr

セ...コントロールがこのレベルで使用することができますように見える:https://plnkr.co/edit/kHJyq3N5ZtoNyAPz6Kbc?p=preview

関連する問題