Javascript Angular2-制作一组单选按钮;“必需”;

Javascript Angular2-制作一组单选按钮;“必需”;,javascript,html,forms,angular,radio-group,Javascript,Html,Forms,Angular,Radio Group,我正在使用Angular2应用程序的模板表单,我正在使用ngForm验证表单是否有效,所有输入是否都有必需的标签,以及ngModel 一切都很简单,但当我遇到以单选按钮形式出现的值数组时。我不能只ngFor整个阵列,然后将每个收音机设置为所需的,这是行不通的。如果设置了值,我可以执行一些自定义事件并进行处理,但我希望使用ngForm.form.valid功能 这是我的无线电代码: <fieldset class="form-group"> <legend>Rati

我正在使用Angular2应用程序的模板表单,我正在使用
ngForm
验证表单是否有效,所有输入是否都有
必需的标签,以及
ngModel

一切都很简单,但当我遇到以单选按钮形式出现的值数组时。我不能只
ngFor
整个阵列,然后将每个收音机设置为
所需的
,这是行不通的。如果设置了值,我可以执行一些自定义事件并进行处理,但我希望使用ngForm.form.valid功能

这是我的无线电代码:

<fieldset class="form-group">
    <legend>Rating system</legend>
    <div class="form-check" *ngFor="let rating of ratingSystem">
      <label class="form-check-label" (mouseenter)="currentRatingId = rating.id">
        <input 
          type="radio" 
          class="form-check-input" 
          name="ratingsRadio" 
          id="rating_{{rating.id}}" 
          value="{{rating.id}}" 
          [checked]="movie.rating.id === rating.id"
          (click)="movie.rating = rating" />
        {{rating.short_tag}}
      </label>
      <small [hidden]="currentRatingId !== rating.id">  &nbsp; &ndash; &nbsp; {{rating.description}}</small>
    </div>
  </fieldset>

ngModel
在哪里??另外,我也不确定是否有一种方法可以在没有任何黑客攻击的情况下对多个
输入进行验证(使用模板驱动的表单)。看看这个。如果你想的话,还有一个解决办法,那就是让列表中的第一个单选项总是被选中,所以它是必须的,因为你不能取消选中它。我想如果你使用反应式表单,你的生活会轻松得多。是的,我没有想清楚。
ngModel
部分缺失,然后一切正常。我肯定会研究反应形式。谢谢
<button type="submit" class="btn btn-success" [disabled]="!myForm.form.valid">Add movie</button>
<fieldset class="form-group">
    <legend>Rating system</legend>
    <div class="form-check" *ngFor="let rating of ratingSystem">
      <label class="form-check-label" (mouseenter)="currentRatingId = rating.id">
        <input 
          type="radio" 
          class="form-check-input" 
          name="ratingsRadio" 
          [value]="rating.id"
          [(ngModel)]="movie.rating.id"
          required
          />
        {{rating.short_tag}}
      </label>
      <small [hidden]="currentRatingId !== rating.id">  &nbsp; &ndash; &nbsp; {{rating.description}}</small>
    </div>
  </fieldset>