Angular 2:无法使用formGroup来使用单选按钮

时间:2017-06-15 20:57:27

标签: angular

我需要将评级值从我的模板传递给我的组件。我目前将它作为参数传递给组件中的方法,如下所示:

<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>

组件:

 filterByRating(rating) {

}

这有效但我宁愿不将值作为参数传递。我尝试使用[formControl]和formControlName但没有成功。我发现的例子是使用硬编码值,但这对我没用。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

这可能对您有所帮助。您应该在视图中使用@ angular / forms中的formControlName和formGroup。

<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>

在您的组件中:

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