Reactive Forms - Radio Button nested in a label

2
votes

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.

2
angularangular2-formsreactive-formsangular-reactive-forms
why do you want to put the input inside the label ? you can use some thing like this <label for="lastname">Last Name</label> <input type="text" id="lastname" /> – Rahul Singh
As I said. I found a good looking example here link and I want to use this in my application. And as I am new to Angular it is important for me to understand things like this. – Thomas Geulen
I cannot reproduce (there is only one formControlName directive, so only the first one works, but it does update....) – n00dl3
@n00dl3: You are right, I copied an already edited code. That's strange. In your plunker it's working, but in my environment not. I created my app with angular-cli and it's running with webpack. – Thomas Geulen
I doubt that cli has anything to do with that behavior, but note that using jQuery alongside with angular may lead to unpredictable behavior as jQuery assumes a "fixed" dom state, while angular updates the dom dynamically. Maybe you have some jQuery code somewhere that is messing with the dom of your inputs and screw the formControl behavior (for example replacing input elements). – n00dl3

2 Answers

0
votes

This might be your solution give the form control name to every controlhere you can find some extra stuff

      <input type="radio" formControlName="food" value="beef" > Beef
      <input type="radio" formControlName="food" value="lamb"> Lamb
      <input type="radio" formControlName="food" value="fish"> Fish
0
votes

Although it is not best practise I did a temp workaround:

<label class="btn active" (click)="setValue('3')>
          <input type="radio" value="3" formControlName="regularity">
</label

and in typescript:

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private testForm: FormGroup;
  private regularity: FormControl

  ngOnInit(){
     this.buttonsPlatform = new FormControl();
     this.testForm= new FormGroup({
            regularity: this.regularity,
     });
   }

    title = 'app works!';

    public setValue(newValue) : void(){
       this.regularity.setValue(newValue);
    }
}