角2 - ラジオボタンのアクセス値

Question

app.component.ts内では、app.component.htmlでクリックしたラジオボタンの実際の値を出力します。

app.component.html

<div class="container"> 
<div class="row"> 
    <div class="col-sm-3 well" style="width: 20%"> 
     <h4>Narrow Your Results</h4> 
     <div class="well"> 
      <h5>Rating</h5> 
      <form [formGroup]="ratingForm"> 
       <input type="radio" formControlName="rating" value=100 
        (click)="filterByRating(ratingForm.value)"> All Grills 
      </form> 
     </div> 
    </div> 
</div> 

app.component.ts filterByRating()で

@Component({ 
    selector: 'app-rootl', 
    moduleId: module.id, 
    templateUrl: app.component.html' 
}) 
export class AppComponent implements OnInit { 

    ratingForm = new FormGroup({ 
     rating: new FormControl(), 
    }); 


    filterByRating(rating: number) { 
     console.log("rating = " + rating.valueOf()); 
    } 
} 

、私は"rating=100"がプリントアウトされることを期待。私は代わりに"rating = [object Object]"

どのように私はオブジェクトの値にアクセスできますか？

Answer 1

(click)イベントでは、filterByRating(ratingForm.value)に電話しています。変数ratingFormはフォーム全体です。ラジオボタンコントロールだけを渡す必要があります。このようなもの：

​​