Angular 2: FormGroup funktioniert nicht mit Radio Button

Question

Ich muss den Bewertungswert von meiner Vorlage an meine Komponente übergeben. Ich bin vorbei zur Zeit als Parameter ein Verfahren in der Komponente wie folgt:

<form [formGroup]="ratingForm"> 
       <div *ngFor="let rating of ratings" class="radio"> 
        <input type="radio" name="rating" value="rating.value" 
         (change)="filterByRating(rating.value)">       
         {{rating.title}} 
        <br> 
       </div> 
      </form> 

Komponente:

filterByRating(rating) { 

} 

Das funktioniert aber ich würde lieber nicht den Wert als Parameter übergeben. Ich habe versucht, [formControl] und formControlName ohne Erfolg zu verwenden. Die Beispiele, die ich gefunden habe, verwenden hartcodierte Werte, aber das funktioniert nicht für mich. Irgendwelche Ideen?

Answer 1

Dies könnte für Sie hilfreich sein. Sie sollten formControlName von @ angular/forms mit formGroup in Ihrer Ansicht verwenden.

<form [formGroup]="ratingForm">  
<div class="radio" *ngFor="let rating of ratings"> 
     <label> 
     <input 
      type="radio" 
      formControlName="rating" 
      [value]="rating.value">{{ rating.title }} 
     </label> 
</div> 
</form> 

In Ihrer Komponente:

ngOnInit() { 
    this.ratingForm = new FormGroup({ 
    'rating': new FormControl('ratingName') 
     .... something like this 

    }); 
} 

// This gives you the value of the rating selected from view 
console.log(this.ratingForm.value.rating);