單選按鈕無法正確切換formControl

我有一個使用FormBuilder構建的表單，並且我已經在其上定義了兩個元素（a和b）。單選按鈕無法正確切換formControl

constructor (
    private fb: FormBuilder 
) { 
    this.form = fb.group({ 
    a: '', 
    b: '' 
    }); 
}

在模板上，我有四個單選按鈕，看起來像這樣。

我需要一列內，在它們之間進行切換以例如A1和B1（A2和B2），以獲得象= 1或b = 2

值之間切換

但與[formcontrol]上的輸入它不能正常工作。

我該如何解決？

<div> 
    <input id='a1' type='radio' name='first-column' value='1' [formControl]="form.controls['a']" > 
    <label for='a1'>a1</label> 

    <input id='a2' type='radio' name='second-column' value='2' [formControl]="form.controls['a']" > 
    <label for='a2'>a2</label> 
</div> 

<div> 
    <input id='b1' type='radio' name='first-column' value='1' [formControl]="form.controls['b']"> 
    <label for='b1'>b1</label> 

    <input id='b2' type='radio' name='second-column' value='2' [formControl]="form.controls['b']"> 
    <label for='b2'>b2</label> 
</div>

Plunker Link

來源

2017-03-01 Billy Logan

對於你必須給不同的價值和相同的名稱（a1和a2，b1和b2）給他們，讓現在你的模板會像

template: ` 
    <div> 
     <input id='a1' type='radio' name='first-column' value='1' [formControl]="form.controls['a']" > 
     <label for='a1'>a1</label> 

     <input id='a2' type='radio' name='second-column' value='2' [formControl]="form.controls['a']" > 
     <label for='a2'>a2</label> 
    </div> 

    <div> 
     <input id='b2' type='radio' name='first-column' value='3' [formControl]="form.controls['b']"> 
     <label for='b2'>b1</label> 

     <input id='b2' type='radio' name='second-column' value='4' [formControl]="form.controls['b']"> 
     <label for='b2'>b2</label> 
    </div> 

`

希望它會幫助你。

檢查Updated Plank

來源

2017-03-01 05:43:46 Viplock

假設我有3 x 3的單選按鈕矩陣。例如，當我在第一行選擇「第一個」單選按鈕時，我不能選擇該行中的其他按鈕，也不能在其他任何行上選擇「第一個」按鈕。你能幫助我嗎？ –

您必須在單選按鈕上單擊編寫自定義代碼。 – Viplock

Angular 2中如何實現這一點？ –

更新了Plunker檢查值也

https://plnkr.co/edit/DH3BxanfGTTtaaFnmzFs?p=preview

如下修改了模板 A1

<input id='a2' type='radio' name = "b" value='2' [formControl]="form.controls['a']" > 
    <label for='a2'>a2</label> 
</div> 

<div> 
    <input id='b1' type='radio' name = "a" value='3' [formControl]="form.controls['b']" > 
    <label for='b2'>b1</label> 

    <input id='b2' type='radio' name = "b" value='4' [formControl]="form.controls['b']" > 
    <label for='b2'>b2</label> 
</div> 
<button type="submit" [disabled]="form.invalid">Submit</button> 

{{form.value|json}}

來源

2017-03-01 05:48:27

我如何獲取選定的值？ –

@BillyLogan @BillyLogan更新爲獲取值，也改變了代碼 –

@BillyLogan同樣看着你的需求，你基本上想要在a1和a2以及b1和b2之間切換，所以請檢查代碼，而不是做任何檢查組件。休息一下，你可以改變視圖的定位 –

單選按鈕無法正確切換formControl

回答

相關問題