I have a problem understanding why in one case Reactive Forms does not work as expected.
There is a button group with radio buttons in my template, each input is nested within a label.When I select a radio button the corresponding FormControl
in my FormGroup
gets no update.
When I place the input control outside the label everything works as expected.
What do I have to do to make this work for my example?
Here is the code:
app.component.html :
<div [formGroup]="testForm">
<div class="row">
<div class="col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn active">
<input type="radio" value="0" name="regularity" formControlName="regularity" checked>
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-dot-circle-o fa-2x"></i>
<span>1 W</span>
</label>
<label class="btn active">
<input type="radio" value="1" name="regularity" >
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-dot-circle-o fa-2x"></i>
<span>2 W</span>
</label>
<label class="btn active">
<input type="radio" value="2" name="regularity" >
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-dot-circle-o fa-2x"></i>
<span>1 M</span>
</label>
<label class="btn active">
<input type="radio" value="3" name="regularity" >
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-dot-circle-o fa-2x"></i>
<span>3 M</span>
</label>
<label class="btn active">
<input type="radio" value="4" name="regularity" >
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-dot-circle-o fa-2x"></i>
<span>6 M</span>
</label>
<label class="btn active">
<input type="radio" value="5" name="regularity" >
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-dot-circle-o fa-2x"></i>
<span>1 Y</span>
</label>
</div>
</div>
</div>
</div>
{{testForm.value|json}}
app.component.ts :
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private testForm: FormGroup;
constructor(private _fb: FormBuilder) {
this.testForm = _fb.group({
regularity: ''
});
}
title = 'app works!';
}
Edit: Obviously there is a problem with using jQuery. When I remove jQuery from my .angular-cli.json, everything works.
formControlName
directive, so only the first one works, but it does update....) – n00dl3