Reaktive Formulare - Optionsfeld in einem Label verschachtelt

Question

Ich habe ein Problem zu verstehen, warum Reactive Forms in einem Fall nicht wie erwartet funktioniert.

Es gibt eine Schaltfläche Gruppe mit Radiobuttons in meiner Vorlage, jeder Eingang ist verschachtelt in einem Label.Wenn ich ein Optionsfeld auswählen, wird die entsprechende FormControl in meinem FormGroup keine Aktualisierung erhalten.

Wenn ich das Eingabesteuerelement außerhalb des Labels platzieren, funktioniert alles wie erwartet.

Was muss ich tun, damit dies für mein Beispiel funktioniert? Hier

ist der 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: Offensichtlich gibt es einen Problem mit der Verwendung von jQuery. Wenn ich jQuery von meinem .angular-cli.json entferne, funktioniert alles.

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

und in Typoskript

:

Answer 1

Dies könnte Ihre Lösung gibt das Formular Steuer Namen zu jeder Steuerhere 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 

Answer 2

werden, obwohl es nicht best practice ich eine temporäre Abhilfe tat, ist:

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